js閃爍效果

dongyang1124發表於2018-12-28

其中.warn是需要閃爍的class,通過改變透明度實現閃爍效果,但是本方法僅適用於火狐瀏覽器,ie瀏覽器就不相容,因此找了方法二,二者都相容

.warn{
-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;
}
}
方法二:
.warn
{
background-color:red;
animation:mymove 1s infinite;
-webkit-animation:mymove 1s infinite; /*Safari and Chrome*/
}
  
@keyframes mymove
{
0%{
opacity: 0.5;
}
100%{
opacity: 1;
}
}
  
@-webkit-keyframes mymove /*Safari and Chrome*/
{
0%{
opacity: 0.5;
}
100%{
opacity: 1;
}
}

相關文章