欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用CSS3設(shè)計地圖上的雷達定位提示效果

設(shè)計達人   發(fā)布時間：2016-04-05 11:01:55   作者：佚名   我要評論
這篇文章主要介紹了使用CSS3設(shè)計地圖上的雷達定位提示效果的實例,即文中所說的水波漣漪效果,能夠控制寬高和透明度,需要的朋友可以參考下

近期工作要做一個用于圖像定位的標(biāo)識，為了讓這個指示標(biāo)識不死板，決定做個簡單的動畫，動畫效果像波浪一樣波動，這樣標(biāo)識就更美觀好看了，喜歡的同學(xué)可以跟著來學(xué)，十分簡單，歡迎指正交流。

先上效果圖：
201645110412546.gif (600×309)

本動畫需要用到的主要屬性：animation, transition 和 Keyframes 屬性
Step 1:HTML 代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="example">  
  2. <div class="dot"></div>  
  3. </div>  

Step 2: CSS樣式：設(shè)置animation屬性

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .dot:before{   
  2. content:' ';   
  3. position: absolute;   
  4. z-index:2;   
  5. left:0;   
  6. top:0;   
  7. width:10px;   
  8. height:10px;   
  9. background-color: #ff4200;   
  10. border-radius: 50%;   
  11. }   
  12.   
  13. .dot:after {   
  14. content:' ';   
  15. position: absolute;   
  16. z-index:1;   
  17. width:10px;   
  18. height:10px;   
  19. background-color: #ff4200;   
  20. border-radius: 50%;   
  21. box-shadow: 0 0 10px rgba(0,0,0,.3) inset;   
  22. -webkit-animation-name:'ripple';/*動畫屬性名，也就是我們前面keyframes定義的動畫名*/  
  23. -webkit-animation-duration: 1s;/*動畫持續(xù)時間*/  
  24. -webkit-animation-timing-function: ease; /*動畫頻率，和transition-timing-function是一樣的*/  
  25. -webkit-animation-delay: 0s;/*動畫延遲時間*/  
  26. -webkit-animation-iteration-count: infinite;/*定義循環(huán)資料，infinite為無限次*/  
  27. -webkit-animation-direction: normal;/*定義動畫方式*/  
  28. }  

設(shè)置動畫方式，像波浪一樣，從小變大變無，所以我們要設(shè)置寬高從0 – 50px，透明度從有至無，這樣就能實現(xiàn)水波漣漪效果啦。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @keyframes ripple {   
  2. 0% {   
  3. left:5px;   
  4. top:5px;   
  5. opcity:75;   
  6. width:0;   
  7. height:0;   
  8. }   
  9. 100% {   
  10. left:-20px;   
  11. top:-20px;   
  12. opacity: 0;   
  13. width:50px;   
  14. height:50px;   
  15. }   
  16. }  

效果完成了，此案例比較適合圖像定位標(biāo)識用，當(dāng)然還可以有更好的方案去代替，完善這個樣式與動畫效果。

相關(guān)文章

  • 純css3實現(xiàn)的地圖位置標(biāo)記動態(tài)顯示效果源碼

    這是一款基于純css3實現(xiàn)的地圖位置標(biāo)記動態(tài)顯示效果源碼。畫面上類似百度地圖位置標(biāo)記的圖標(biāo)呈現(xiàn)垂直緩沖降落的動畫效果，且降落后位置固定的圖標(biāo)底部帶有擴散顯示圓環(huán)的動
    2017-05-29

  • html5+css3實現(xiàn)的世界地圖區(qū)域劃分效果源碼

    這是一款基于html5+css3實現(xiàn)的世界地圖區(qū)域劃分效果源碼，是一款鼠標(biāo)移動地圖上高亮顯示對應(yīng)區(qū)域劃分塊效果的特效代碼。可有效響應(yīng)鼠標(biāo)事件實現(xiàn)地圖不規(guī)則形狀的樣式變換功
    2015-11-12

  • CSS3地圖動態(tài)實例代碼(圓圈向外擴散)

    這篇文章主要介紹了CSS3地圖動態(tài)實例代碼(圓圈向外擴散),主要考察CSS3中動畫的使用，通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下
    2018-06-15

最新評論