今天和大家分享一個利用CSS3的animation屬性完成的一個邊框動畫效果。大家都知道，CSS3給我們提供了@keyframes關鍵字，能讓我們在網頁中輕松插入動畫。一個簡單的動畫插入，結構如下：
1 <style> 2 .wrap{ 3 position: absolute; 4 left: 200px; 5 width: 200px; 6 height: 200px; 7 animation: run 2s linear infinite; /*動畫名 時間 速度 動畫次數*/ 8 background-color: rgb(87, 182, 9); 9 } 10 @keyframes run{ /* @keyframe 關鍵字聲明動畫 */ 11 from{ /* 從什么樣子 */ 12 left: 200px; 13 } 14 to{ 15 left: 500px; /*變成什么樣子*/ 16 } 17 } 18 </style>
19 <body> 20 <div class="wrap"></div> 21 </body>
效果如下：
除了用from to 這種形式之外，我們還可以用百分比，更加細化各個階段的表現樣式，例子如下：
<head>
<style> .around{ position: relative; width:200px; height: 300px; margin:50px auto; background-color:#000005; cursor: pointer; } .around::before,.around::after{ content:''; position: absolute; border-style:solid; animation: move 5s linear infinite; opacity: 1; } .around::after{ animation-delay: -2.5s; } @keyframes move{ 0%{ top:-21px; left:-21px; width: 240px; height: 0; border-width:1px 0 0 0; border-color:#a21; } 25%{ top:-21px; left:-21px; width:0; height:340px; border-width:0 0 0 1px; border-color:rgba(40, 201, 40, 0.904); } 50%{ top:318px; left:-21px; width: 240px; height: 0; border-width:0 0 1px 0; border-color:rgb(204, 74, 14); } 75%{ top:-21px; left:218px; width: 0; height: 340px; border-width:0 1px 0 0; border-color:rgb(160, 170, 17); } 100%{ top:-21px; left:-21px; width: 240px; height: 0; border-width:1px 0 0 0; border-color:rgb(224, 53, 224); } } </style> </head> <body> <div class="around"></div> </body>
效果如下：
這樣，我們輕松實現了邊框滾動效果，只用了一個div標簽，很簡單吧