+ -
当前位置:首页 →  php教程>CSS如何实现div闪烁

CSS如何实现div闪烁

时间:2021-05-17

来源:互联网

在手机上看
手机扫描阅读

今天PHP爱好者为您带来在css中,可以使用“@keyframes”规则和animation属性来实现div闪烁效果;只需要先使用“@keyframes”创建具有闪烁效果的动画;然后使用animation属性设置动画所需时间,速度以及次数等。希望对大家有所帮助。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

效果图如下

这里写图片描述

代码如下

@keyframes fade {
   from {        
   opacity: 1.0;    
   }
   50% {        
   opacity: 0.4;    
   }
   to {        
   opacity: 1.0;    
   }
}
@-webkit-keyframes fade {    
   from {        
   opacity: 1.0;    
   }
   50% {        
   opacity: 0.4;    
   }
   to {        
   opacity: 1.0;    
   }
}
.headerBox {    
   color: #fff;    
   padding: 10px;    
   font-size: 15px;    
   height: 60px;    
   animation: fade 600ms infinite;    
   -webkit-animation: fade 600ms infinite;
}

给p设置headerBox 样式即可

以上就是CSS如何实现p闪烁的详细内容,更多请关注php爱好者其它相关文章!

相关阅读 更多