如何使用CSS3設計地圖上的雷達定位提示效果

這篇文章主要講解了“如何使用CSS3設計地圖上的雷達定位提示效果”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何使用CSS3設計地圖上的雷達定位提示效果”吧！

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

先上效果圖：

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

XML/HTML Code復制內容到剪貼板

1. <div class="example">  

2. <div class="dot"></div>  

3. </div>  

Step 2: CSS樣式：設置animation屬性

CSS Code復制內容到剪貼板

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;/*動畫持續時間*/  

24. -webkit-animation-timing-function: ease; /*動畫頻率，和transition-timing-function是一樣的*/  

25. -webkit-animation-delay: 0s;/*動畫延遲時間*/  

26. -webkit-animation-iteration-count: infinite;/*定義循環資料，infinite為無限次*/  

27. -webkit-animation-direction: normal;/*定義動畫方式*/  

28. }  

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

CSS Code復制內容到剪貼板

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. }  

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

感謝各位的閱讀，以上就是“如何使用CSS3設計地圖上的雷達定位提示效果”的內容了，經過本文的學習后，相信大家對如何使用CSS3設計地圖上的雷達定位提示效果這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！