应用CSS3设计方案地形图上的雷达精准定位提醒实

2021-01-20 06:29 jianzhan

最近工作中要做1个用于图象精准定位的标志，以便让这个标示标志没死板，决策做个简易的动漫，动漫实际效果像波浪纹1样起伏，这样标志就更美观大方漂亮了，喜爱的同学能够跟随来学，10分简易，欢迎纠正沟通交流。

先上实际效果图：

本动漫必须用到的关键特性：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是1样的*/  
  25. -webkit-animation-delay: 0s;/*动漫延迟时间時间*/  
  26. -webkit-animation-iteration-count: infinite;/*界定循环系统材料，infinite为无尽次*/  
  27. -webkit-animation-direction: normal;/*界定动漫方法*/  
  28. }  

设定动漫方法，像波浪纹1样，从小增大变无，因此大家要设定宽高从0 – 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. }  

实际效果进行了，此实例较为合适图象精准定位标志用，自然还能够有更好的计划方案去替代，健全这个款式与动漫实际效果。

为您推荐