<!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>
純css3閃爍動畫《發光的邊框效果》
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。