如何使用CSS3设计地图上的雷达定位提示效果
更新:HHH   时间:2023-1-7


这篇文章主要讲解了“如何使用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. positionabsolute;   

  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. positionabsolute;   

  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-directionnormal;/*定义动画方式*/  

  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设计地图上的雷达定位提示效果这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是天达云,小编将为大家推送更多相关知识点的文章,欢迎关注!

返回web开发教程...