CSS3實(shí)現(xiàn)閃爍動(dòng)畫(huà)效果的方法
發(fā)布時(shí)間：2015-02-09 16:15:41 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要為大家介紹了CSS3實(shí)現(xiàn)閃爍動(dòng)畫(huà)效果的方法,可實(shí)現(xiàn)屬性名為className的元素呈現(xiàn)閃爍效果的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了CSS3實(shí)現(xiàn)閃爍動(dòng)畫(huà)效果的方法。分享給大家供大家參考。具體方法如下：
給class屬性名為className的元素添加閃爍動(dòng)畫(huà)效果
復(fù)制代碼
代碼如下:.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;
}
}
希望本文所述對(duì)大家基于css的網(wǎng)頁(yè)設(shè)計(jì)有所幫助。
相關(guān)文章
css3 實(shí)現(xiàn)文字閃爍效果的三種方式示例代碼
這篇文章主要介紹了css3 實(shí)現(xiàn)文字閃爍效果的三種方式示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編2021-04-25
使用CSS3實(shí)現(xiàn)按鈕懸停閃爍動(dòng)態(tài)特效代碼
這篇文章主要介紹了使用CSS3實(shí)現(xiàn)按鈕懸停閃爍動(dòng)態(tài)特效,代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-08-25
