• 技术文章 >web前端 >css教程

    CSS如何实现div闪烁

    醉折花枝作酒筹醉折花枝作酒筹2021-04-09 17:05:20原创3962

    在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闪烁的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:css 闪烁
    上一篇:CSS3如何实现关闭按钮 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• css图片怎么设置透明度• css如何设置圆角• CSS如何设置div水平居中• css怎么实现禁止缩放• css怎么设置右对齐
    1/1

    PHP中文网