css3 图片放大缩小闪烁效果
Posted sophia
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3 图片放大缩小闪烁效果相关的知识，希望对你有一定的参考价值。
直接把图片替换就可以了，我的图片是透明的，所以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 图片放大缩小闪烁效果的主要内容，如果未能解决你的问题，请参考以下文章