當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

css3 图片放大缩小闪烁效果

發布時間：2023/12/13 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 css3 图片放大缩小闪烁效果小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

直接把圖片替換就可以了，我的圖片是透明的，所以body設置為黑色的，不不要可以去掉

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3 圖片放大縮小閃爍效果</title>

}
@-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>

轉載于:https://www.cnblogs.com/pikachuworld/p/5578489.html

總結

以上是生活随笔為你收集整理的css3 图片放大缩小闪烁效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。