地图上向外扩散的发射点

Posted 噜噜修

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了地图上向外扩散的发射点相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        .circleBox{
            position: relative;
            width:100px;
            height:100px;
            top:100px;
            left:50%;
        }
        .circle{
            width:100px;
            height:100px;
            position: absolute;
        }
        .dot{
            position: absolute;
            top:0;
            right:0;
            bottom:0;
            left:0;
            margin:auto;
            width:10px;
            height:10px;
            background: #00cdec;
            border-radius:50%;
        }
        .circle:after{
            position: absolute;
            content:"";
            display:block;
            top:0;
            right:0;
            bottom:0;
            left:0;
            margin:auto;
            border:1px solid #00cdec;
            width:100%;
            height:100%;
            border-radius:50%;
            box-shadow: inset 0 0 5em rgba(0,205,236,.16);
            opacity: 0;
        }
        .circle1:after{
            -webkit-animation: mymove 4.5s ease-out 200ms infinite;
            -o-animation: mymove 4.5s ease-out 200ms infinite;
            animation: mymove 4.5s ease-out 200ms infinite;
        }
        .circle2:after{
            -webkit-animation: mymove 4.5s ease-out 1725ms infinite;
            -o-animation: mymove 4.5s ease-out 1725ms infinite;
            animation: mymove 4.5s ease-out 1725ms infinite;
        }
        .circle3:after{
            -webkit-animation: mymove 4.5s ease-out 3225ms infinite;
            -o-animation: mymove 4.5s ease-out 3225ms infinite;
            animation: mymove 4.5s ease-out 3225ms infinite;
        }
        @keyframes mymove {
            from {width:0px;height:0px;opacity: 1;}
            to {width:100px;height:100px;opacity: 0;}
        }
       
    
    </style>
 
</head>
<body>
<div class="circleBox">
    <div class="dot"></div>
    <div class="circle1 circle"></div>
    <div class="circle2 circle"></div>
    <div class="circle3 circle"></div>
</div>
 
 
<script
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
<script type="text/javascript">
 
</script>
</body>
</html>


 WEB前端学习交流群21 598399936

以上是关于地图上向外扩散的发射点的主要内容,如果未能解决你的问题,请参考以下文章

用Python在地图上模拟疫情扩散

如何在地图内找到附近的码头、码头和船只发射点?

华为机试真题 C++ 实现计算疫情扩散时间

百度地图圈出直径2公里

一起Talk Android吧(第五百一十五回:绘制向外扩散的水波纹)

谷歌地图api圆形渐变?