CSS3實現(xiàn)閃爍動畫效果的方法
發(fā)布時間：2015-02-09 16:15:41 作者：佚名 
我要評論
我要評論這篇文章主要為大家介紹了CSS3實現(xiàn)閃爍動畫效果的方法,可實現(xiàn)屬性名為className的元素呈現(xiàn)閃爍效果的功能,非常具有實用價值,需要的朋友可以參考下
本文實例講述了CSS3實現(xiàn)閃爍動畫效果的方法。分享給大家供大家參考。具體方法如下：
給class屬性名為className的元素添加閃爍動畫效果
復制代碼
代碼如下:.className{
-webkit-animation: twinkling 1s infinite ease-in-out
}
.animated{
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
@-webkit-keyframes twinkling{
0%{
opacity: 0.5;
}
100%{
opacity: 1;
}
}
@keyframes twinkling{
0%{
opacity: 0.5;
}
100%{
opacity: 1;
}
}
-webkit-animation: twinkling 1s infinite ease-in-out
}
.animated{
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
@-webkit-keyframes twinkling{
0%{
opacity: 0.5;
}
100%{
opacity: 1;
}
}
@keyframes twinkling{
0%{
opacity: 0.5;
}
100%{
opacity: 1;
}
}
希望本文所述對大家基于css的網(wǎng)頁設計有所幫助。
相關文章
這篇文章主要介紹了css3 實現(xiàn)文字閃爍效果的三種方式示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編2021-04-25
使用CSS3實現(xiàn)按鈕懸停閃爍動態(tài)特效代碼
這篇文章主要介紹了使用CSS3實現(xiàn)按鈕懸停閃爍動態(tài)特效,代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-08-25
