CSS3 的box-shadow進階之 - 動畫篇 - 製做輻射動畫

本篇文章是上一篇講box-shadow基礎知識的延伸，建議先花幾分鐘閱讀那篇文章，點擊閱讀，再來看這篇。

除了box-shadow屬性知識外，製做動畫，還須要對CSS3的animation, @keyframes製做動畫有所瞭解。

接下來，仍是那張圖。。

 

基本思路以下：

1.寫好一個div，<div class="circle"></div>

2.利用border-radius，把它變成一個圓

3.給它添加after僞類，僞類也是一個同樣大小的圓(不設置背景色)，跟當前的圓重疊在一塊兒

4.鼠標移入的時候，給僞類添加animation動畫

5.動畫包括，opacity的變化，添加層疊陰影（關鍵），僞類放大2倍，就作好了咱們要的效果了。

感嘆一下，CSS的僞類真是厲害~~好多狀況下能夠使用

代碼以下

<div class="circle"></div>　

body { margin:0; padding:0; background:black;
 } .circle{ width:50px; height:50px; border-radius:50%; background-color:#f50ad5; margin:80px;
  } .circle:after{ content:''; display:block; left:0; top:0; width:50px; height:50px; border-radius:50%;
  } .circle:hover:after{ /*鼠標入的時候，僞類元素的動畫開始，動畫名稱就是下面@keyframes定義的circle*/ animation: circle 1.3s ease-out 75ms;
  } @keyframes circle{ 0% { opacity: 0.4;
    } 40% { opacity: 0.7; box-shadow: 0 0 0 2px rgba(255,255,255,0.3), 0 0 10px 10px black, 0 0 0 10px rgba(255,255,255,0.8); /*三層陰影*/
    } 100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.3), 0 0 10px 10px black, 0 0 0 10px rgba(255,255,255,0.8); transform: scale(2); /*放大兩倍*/ opacity: 0;
    } }

 

 

第二張圖實現起來就更簡單了

直接添加添加動畫，放大陰影尺寸便可，代碼以下

<button class="button">點擊</button>　

 body { margin:0; padding:0; background:black;
  } .button{ width:50px; height:35px; color:#f50ad5; border:2px solid #f50ad5; background-color:black; margin:80px;
  } .button:hover{ /*鼠標移入的時候，動畫開始*/ animation: shine 0.4s linear;
  } @keyframes shine{ 0%{ box-shadow:0 0 0px 0px rgba(245, 10, 213,0.9);
    } 100%{ box-shadow:0 0 0px 25px rgba(245, 10, 213,0); 
    } }

 

看似炫酷的動畫，就這麼簡單作出來了，發揮想象力，還能夠作出更有趣的動畫哦。

碼字不易，以爲有幫助，請給個贊吧~

另外，文章爲原創，如需轉載，請註明出處，謝謝！