纯css3闪烁动画《发光的边框效果》

时间 2019-11-24

原文原文链接

<!doctype html><html><head>    <meta charset="utf-8">    <title>纯css3闪烁动画</title>    <style>        /*  动画闪烁颜色  */        @-webkit-keyframes greenPulse {            from { background-color: #749a02; -webkit-box-shadow: 0 0 9px #333; }            50% { background-color: #91bd09; -webkit-box-shadow: 0 0 18px #91bd09; }            to { background-color: #749a02; -webkit-box-shadow: 0 0 9px #333; }        }        @-webkit-keyframes bluePulse {            from { background-color: #007d9a; -webkit-box-shadow: 0 0 9px #333; }            50% { background-color: #2daebf; -webkit-box-shadow: 0 0 18px #2daebf; }            to { background-color: #007d9a; -webkit-box-shadow: 0 0 9px #333; }        }        @-webkit-keyframes magentaPulse {            from { background-color: #630030; -webkit-box-shadow: 0 0 9px #333; }            50% { background-color: #a9014b; -webkit-box-shadow: 0 0 18px #a9014b; }            to { background-color: #630030; -webkit-box-shadow: 0 0 9px #333; }        }        /*  重复动画  */        a.button{-webkit-animation-iteration-count: infinite;}        /*  动画名称、动画完成时间  */        .greenPulse.button{-webkit-animation-name:greenPulse;-webkit-animation-duration: 3s;}        .bluePulse.button{-webkit-animation-name:bluePulse;-webkit-animation-duration:3s;}        .magentaPulse.button{-webkit-animation-name:magentaPulse;-webkit-animation-duration:3s;}    </style></head><body style="background-color:#ccc;"><div id="audioactiveButtonspage" class="chrome window">    <div class="wall-of-buttons">        <a class="large greenPulse button">lock at me</a>        <a class="large bluePulse button">active me</a>        <a class="barge magentaPulse button">click me</a>    </div></div></body></html>

1. css3实现星星闪烁效果
2. QLineEdit边框闪烁
3. 纯CSS3 动画实现打字效果
4. 20X18 FCPX插件霓虹灯发光手绘闪烁效果动画元素NeonGenerators
5. 纯CSS3动画实现SVG边框特效
6. 《Css3动画效果》
7. Css3动画效果
8. CSS3动画效果
9. css3动画效果
10. 纯CSS3向右循环闪过效果
更多相关文章...
• SVG 模糊效果 - SVG 教程
• ionic 加载动画 - ionic 教程
• Docker容器实战(七) - 容器眼光下的文件系统
• PHP开发工具