css3 图片放大缩小闪烁效果
直接把圖片替換就可以了，我的圖片是透明的，所以body設(shè)置為黑色的，不不要可以去掉
?
<!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="" οnclick="return false;" hidefocus=""></a>
</div>
</body>
</html>
轉(zhuǎn)載于:https://www.cnblogs.com/pikachuworld/p/5578489.html
總結(jié)
以上是生活随笔為你收集整理的css3 图片放大缩小闪烁效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 名称或代码在系统中已被使用"
- 下一篇： [小技巧] micropython 如何