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); 
    }
  }

 

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

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

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