亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

近期工作要做一個(gè)用于圖像定位的標(biāo)識，為了讓這個(gè)指示標(biāo)識不死板，決定做個(gè)簡單的動畫，動畫效果像波浪一樣波動，這樣標(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ù)時(shí)間*/  
  24. -webkit-animation-timing-function: ease; /*動畫頻率，和transition-timing-function是一樣的*/  
  25. -webkit-animation-delay: 0s;/*動畫延遲時(shí)間*/  
  26. -webkit-animation-iteration-count: infinite;/*定義循環(huán)資料，infinite為無限次*/  
  27. -webkit-animation-direction: normal;/*定義動畫方式*/  
  28. }  

設(shè)置動畫方式，像波浪一樣，從小變大變無，所以我們要設(shè)置寬高從0 – 50px，透明度從有至無，這樣就能實(shí)現(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)然還可以有更好的方案去代替，完善這個(gè)樣式與動畫效果。

相關(guān)文章

最新評論