Hiệu ứng động CSS3

  Bài viết hay nhất1
CSS3:

<style>
@keyframes flashEffect 
{

0%, 50%, 100% 
{
opacity: 1;
}
25%, 75% 
{
opacity: 0;
}

}
//Webkit for Safari and Chrome browsers
@-webkit-keyframes flashEffect 
{

0%, 50%, 100%
{
opacity: 1;
}
25%, 75%
{
opacity: 0;
}

}

.flash
{
animation:flashEffect 1s infinite;
-webkit-animation:flashEffect 1s infinite; /* Safari and Chrome */
text-shadow: 2px 2px 8px #FFFFFF; /* Blur effect */
}
</style>



HTML5 Code


<!doctype html>
<html lang="en">
<head>
<title>Page Title</title>
//Include style here
</head>
<body>
<div class="flash">
9lessons Programming Blog
</div>
</body>
</html>


Animation.css



<!doctype html>
<html lang="en">
<head>
<title>Page Title</title>
<link rel="stylesheet" href="animate.css"/>
<style>
.effectTada
{
animation:tada 1s infinite;
-webkit-animation:tada 1s infinite; /* Safari and Chrome */
}
.effectBounce
{
animation:bounce 1s infinite;
-webkit-animation:bounce 1s infinite; /* Safari and Chrome */
}
.effectSwing
{
animation:swing 1s infinite;
-webkit-animation:swing 1s infinite; /* Safari and Chrome */
}
</style>
</head>
<body>
<img src="image1.png" class="effectSwing" />
<img src="image2.png" class="effectTada" />
<img src="image3.png" class="effectBounce" />
</body>
</html>




<link rel="stylesheet" href="animate.css"/>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function()
{

$(".stdelete").click(function()
{
var A=$(this).parent().parent();
A.addClass("effectHinge"); //Applying style
A.delay(500).fadeOut("slow",function()
{
$(this).remove();
});
});

});
</script>


HTML Code


<div class="stbody">
<div class="sttext"><span class="stdelete">X</span>
9lessons Programming Blog
</div>
</div>
Bạn không có quyền trả lời bài viết