css3實現逐漸變大的圓填充div背景的效果

手機端現在的一些應用會運用上這樣一個效果，就是duang的一下出現一個圓變大直到填充整個div，動感十足。

想到css3的scale屬性，就自己來實現一下。

<div id="bcd" style="width:500px;height:200px;position:relative;background-color:#aaa;overflow:hidden;border:3px solid #333;">
    <div class="anim"></div>
 </div>

 

css樣式,用border-radius屬性設置圓，改為用背景透明的白色大圓形能達到同樣的效果:

 

.anim{
      position: absolute;
      border-radius: 50%;
      height:1200px;
      width:1200px;
      background-color: #fff;
      border-radius: 50%;
      /*background: url(1.png) no-repeat;*/
      top:-550px;
      left:-480px;
      -webkit-transform:scale(0);
      -ms-transform:scale(0);
      -moz-transform:scale(0);
      transform:scale(0);
      -webkit-transform-origin: center center 0;
      -moz-transform-origin: center center 0;
      -ms-transform-origin: center center 0;
      transform-origin: center center 0;
      -webkit-transition:all 0.6s ease 0s;
      -moz-transition:all 0.6s ease 0s;
      transition:all 0.6s ease 0s;
    }
    .active{
      -webkit-transform:scale(1);
      -moz-transform:scale(1);
      -ms-transform:scale(1);
      transform:scale(1);
      -webkit-transition:all 1s cubic-bezier(.55,.06,.68,.19) 0s;
      -moz-transition:all 1s cubic-bezier(.55,.06,.68,.19) 0s;      
      transition:all 1s cubic-bezier(.55,.06,.68,.19) 0s;
      /*transition屬性的緩動效果支持標准三次方貝塞爾曲線的哦*/
    }
    </style>

 

 

 

 

transition屬性一般只說是用於兩個狀態間轉換間的過渡，更具體的是，transition定義的是從其他狀態轉換到該定義所在的狀態的過渡情況。以上面的代碼為例，active類的transition定義的是其他類(.anim)過渡到active類的過渡情況，而anim類的transition定義的則是其他類（.active）過渡到anim類的過渡情況。

這里貼出transform和transition的瀏覽器兼容情況：

transform, 來自https://developer.mozilla.org/en-US/docs/Web/CSS/transform

 

transition（注意ie的transition沒有ms前綴的），來自https://developer.mozilla.org/en-US/docs/Web/CSS/transition

 

點擊方框就能duang的出現逐漸變大的圓形填充整個div，js代碼：

  function $(a){ return document.getElementById(a); } $("bcd").onclick=function(){ if(this.children[0].className=="anim"){ this.children[0].className+=" active"; } else{ this.children[0].className="anim"; } }

 

考慮到用類來表示不同狀態簡潔直觀，當然也可以直接用style改寫，也不能忘了處理兼容性問題：

$("bcd").onclick=function(){ var t = this.children[0].style; //注意瀏覽器兼容性屬性寫法的首字母，webkit內核的w可大寫也可小寫，firefox是Moz和ie是ms,使用jQuery的css方法時的兼容性寫法同此
    if(t.transform=="scale(1)"||t.WebkitTransform=="scale(1)"||t.MozTransform=="scale(1)"||t.msTransform=="scale(1)"){ t.transform="scale(0)"; t.WebkitTransform="scale(0)"; t.MozTransform="scale(0)"; t.msTransform="scale(0)"; } else{ t.transform="scale(1)"; t.WebkitTransform="scale(1)"; t.MozTransform="scale(1)"; t.msTransform="scale(1)"; } }

 

趁機學習了下用ps將動畫截圖制作成gif動圖orz，要保存為gif格式。

有32、64、128色可選，還有仿色和無仿色。仿色一般用於顏色少的圖，無仿色用於豐富色彩的情況。由於用的顏色值不多，就選擇“32 仿色”保存，后發現選擇"gif 限制"保存占空間更小，就改為“gif 限制”保存了，動畫的效果大概如下：

 

 對於手機端來說，click事件還是可以使用的，但是可以用touchstart或touchend來代替。

 只在手機端的uc瀏覽器測試了，發現transform和transition屬性都需要webkit前綴才能使用。

 另外比較有意思的是，我還測試了下:hover偽類：

 

#bcd:hover .anim{
  -webkit-transform:scale(1);
  -moz-transform:scale(1);
  transform:scale(1);
}

 

對於pc端來說鼠標移到上面就能出發hover效果，但是對於移動端當然是沒有hover這種東西了，那到底會不會出發這個效果呢？

結果是在沒有監聽點擊或觸摸事件的情況下，用戶點擊div就會觸發hover效果，點擊其他區域就會觸發hover移除的效果，

但是如果有監聽點擊或觸摸事件的處理方法，就會覆蓋掉hover效果。