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

最新推荐文章于 2024-06-01 08:37:14 发布

weixin_30648587

最新推荐文章于 2024-06-01 08:37:14 发布

阅读量721

点赞数

文章标签：测试前端 ViewUI

原文链接：http://www.cnblogs.com/liuzhiqiangbk/p/6549491.html

版权

<!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>

转载于:https://www.cnblogs.com/liuzhiqiangbk/p/6549491.html

weixin_30648587

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
纯css3闪烁动画《发光的边框效果》

<!doctype html><html><head> <meta charset="utf-8"> <title>纯css3闪烁动画</title> <style> /* 动画闪烁颜色 */ @-webkit-keyframes greenPulse { ...
复制链接

扫一扫