純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開發工具

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。