CSS如何实现div闪烁
程序员文章站
2022-03-25 18:34:39
...
在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; }
给div设置headerBox 样式即可
推荐学习:css视频教程
以上就是CSS如何实现div闪烁的详细内容,更多请关注其它相关文章!
上一篇: CSS的表格边框使用什么属性设置
下一篇: python为被装饰的函数保留元数据方法
推荐阅读
-
请问如何实现table的外框和内框线的粗度不同??_html/css_WEB-ITnose
-
DIV+CSS实现圆角_html/css_WEB-ITnose
-
CSS3如何实现2D转换和3D转换,他们有何区别_html/css_WEB-ITnose
-
在没有服务器的网页之间如何实现数据的共享_html/css_WEB-ITnose
-
css如何实现自动编号?计数器的使用
-
css如何实现固定的背景图像
-
css3如何实现过渡动画的效果?css3过渡效果的实现方法
-
css3图片旋转如何实现?css3实现图片旋转动画效果的方法
-
如何使用纯CSS实现太阳和地球和月亮的运转模型动画
-
如何用css3实现switch组件开关的方法