码迷,mamicode.com
首页 > Web开发 > 详细

css3 图片放大缩小闪烁效果

时间:2016-06-12 20:09:37      阅读:300      评论:0      收藏:0      [点我收藏+]

标签:

直接把图片替换就可以了,我的图片是透明的,所以body设置为黑色的,不不要可以去掉

 

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3 图片放大缩小闪烁效果</title>

<style>
body{background:#000;opacity:0.8;}

.flicker_down{
width:105px;
height:105px;
display:inline-block;
position:fixed;
bottom:80px;
left:50%;
background:url("images/last.png") no-repeat;

}
@keyframes flicker{
0%,100%{
transform:scale(0.6);
-moz-transform:scale(0.6);
-o-transform:scale(0.6);
-webkit-transform:scale(0.6);
-ms-transform:scale(0.6);
opacity:0
}
50%{
transform:scale(1.0);
-moz-transform:scale(1.0);
-o-transform:scale(1.0);
-webkit-transform:scale(1.0);
-ms-transform:scale(1.0);
opacity:1
}

}
@-webkit-keyframes flicker{
0%,100%{
-webkit-transform:scale(0.6);
-moz-transform:scale(0.6);
-o-transform:scale(0.6);
-ms-transform:scale(0.6);
transform:scale(0.6);
opacity:0
}
50%{
-webkit-transform:scale(1.0);
-moz-transform:scale(1.0);
-o-transform:scale(1.0);
-ms-transform:scale(1.0);
transform:scale(1.0);
opacity:1
}

}
@-moz-keyframes flicker{
0%,100%{
-moz-transform:scale(0.6);
-o-transform:scale(0.6);
-webkit-transform:scale(0.6);
-ms-transform:scale(0.6);
transform:scale(0.6);
opacity:0
}
50%{
-moz-transform:scale(1.0);
-o-transform:scale(1.0);
-webkit-transform:scale(1.0);
-ms-transform:scale(1.0);
transform:scale(1.0);
opacity:1
}

}
@-o-keyframes flicker{
0%,100%{
-o-transform:scale(0.6);
-moz-transform:scale(0.6);
-webkit-transform:scale(0.6);
-ms-transform:scale(0.6);
transform:scale(0.6);
opacity:0
}
50%{
-o-transform:scale(1.0);
-moz-transform:scale(1.0);
-webkit-transform:scale(1.0);
-ms-transform:scale(1.0);
transform:scale(1.0);
opacity:1
}

}
.flicker_down .trans{
-webkit-animation:flicker 2.0s infinite ease-in-out;
-moz-animation:flicker 2.0s infinite ease-in-out;
-o-animation:flicker 2.0s infinite ease-in-out;
animation:flicker 2.0s infinite ease-in-out
}
.flicker_down .arrow{
animation-delay:-2.0s;
-webkit-animation-delay:-2.0s;
-moz-animation-delay:-2.0s;
-o-animation-delay:-2.0s
}

 

</style>
</head>
<body>
<div>

<a class="flicker_down arrow  trans" href="" onclick="return false;" hidefocus=""></a>

</div>
</body>
</html>

css3 图片放大缩小闪烁效果

标签:

原文地址:http://www.cnblogs.com/pikachuworld/p/5578489.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!