纯css3圆形从中心向四周扩散动画效果（地图地点扩散）

效果：


代码：

<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>css3圆扩散</title>
    <style>
        @keyframes warn {
            0% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.0;
            }
            25% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.1;
            }
            50% {
                transform: scale(0.5);
                -webkit-transform: scale(0.5);
                opacity: 0.3;
            }
            75% {
                transform: scale(0.8);
                -webkit-transform: scale(0.8);
                opacity: 0.5;
            }
            100% {
                transform: scale(1);
                -webkit-transform: scale(1);
                opacity: 0.0;
            }
        }
        @keyframes warn1 {
            0% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.0;
            }
            25% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.1;
            }
            50% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.3;
            }
            75% {
                transform: scale(0.5);
                -webkit-transform: scale(0.5);
                opacity: 0.5;
            }
            100% {
                transform: scale(0.8);
                -webkit-transform: scale(0.8);
                opacity: 0.0;
            }
        }
        .container {
            position: relative;
            width: 40px;
            height: 40px;
            /*border: 1px solid #000;*/
        }
        /* 保持大小不变的小圆圈  */
        .dot {
            position: absolute;
            width: 92px;
            height: 92px;
            left: 120px;
            top: 120px;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border: 2px solid red;
            border-radius: 50%;
            z-index: 2;
        }
        /* 产生动画（向外扩散变大）的圆圈  */
        .pulse {
            position: absolute;
            width: 320px;
            height: 320px;
            left: 2px;
            top: 2px;
            border: 6px solid red;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            z-index: 1;
            opacity: 0;
            -webkit-animation: warn 2s ease-out;
            -moz-animation: warn 2s ease-out;
            animation: warn 2s ease-out;
            -webkit-animation-iteration-count: infinite;
            -moz-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            box-shadow: 1px 1px 30px red;

        }
        .pulse1 {
            position: absolute;
            width: 320px;
            height: 320px;
            left: 2px;
            top: 2px;
            border: 6px solid red;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            z-index: 1;
            opacity: 0;
            -webkit-animation: warn1 2s ease-out;
            -moz-animation: warn1 2s ease-out;
            animation: warn1 2s ease-out;
            -webkit-animation-iteration-count: infinite;
            -moz-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            box-shadow: 1px 1px 30px red;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="dot"></div>
    <div class="pulse"></div>
    <div class="pulse1"></div>
</div>
  </body></html>

示例2：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地图</title>
    <style>
        *{padding:0px;margin: 0px;}
        .bg{width: 100%;height:770px;position: relative;}
        .bg img{width: 100%;height: 100%;}
        .bg .content{width: 748px;height:450px;position: absolute;left: 410px;top: 60px;}
        .bg .content div{background:#009FD9;width: 10px;height: 10px;border-radius:50%;position: relative;}
        .bg .content p{position: absolute;top:50%;left:50%;margin-left:-20px;margin-top:-20px;width: 40px;height: 40px;border-radius:50%;animation: myfirst 4s  infinite;border:1px solid #009FD9;opacity: 0; }
        .bg .content  span{position: absolute;top:50%;left:50%;margin-left:-20px;margin-top:-20px;display:block;width: 40px;height: 40px;border-radius:50%;animation: myfirst 4s infinite;border:1px solid #009FD9;opacity: 0;}
        .bg .content .one{position: absolute;left:600px; top:100px;}
        .bg .content .two{position: absolute;left:550px; top:150px;}
        .bg .content .three{position: absolute;left:500px; top:200px;}
        .bg .content .four{position: absolute;left:450px; top:250px;}
        .bg .content .five{position: absolute;left:400px; top:300px;}
        .bg .content .six{position: absolute;left:400px; top:350px;}
        .bg .content .seven{background: #FF9900;position: absolute;left:350px; top:300px;}
        .bg .content .eight{background: #FF9900;position: absolute;left:400px; top:250px;}
        .bg .content .nine{background: #A2A9B4;position: absolute;left:250px; top:200px;}
        .bg .content .ten{background: #A2A9B4;position: absolute;left:300px; top:350px;}
        .bg .content .one span{animation-delay: 2.7s;}
        .bg .content .two span{animation-delay: 1.4s;}
        .bg .content .three span{animation-delay: 2.6s;}
        .bg .content .four span{animation-delay: 1.4s;}
        .bg .content .five span{animation-delay: 0.8s;}
        .bg .content .six span{animation-delay: 0.9s;}
        .bg .content .seven span{animation-delay: 1.6s;}
        .bg .content .eight span{animation-delay: 1.8s;}
        .bg .content .nine span{animation-delay: 3s;}
        .bg .content .ten span{animation-delay: 1.5s;}
        
        @keyframes myfirst{
            0% {transform: scale(0);opacity: 0;}
            /* 40% {transform: scale(3);} */
            60% {opacity: 0.8;}
            /* 80% {transform: scale(5);} */
            100% {transform: scale(1);opacity: 0;}
        }
    </style>
</head>
<body>
    <div class="bg" style="background:#f1f1f1;">
        <!-- <img src="bg.png" alt=""> -->
        <div class="content"><img src="https://img.alicdn.com/tfs/TB1EBxZrwoQMeJjy0FoXXcShVXa-1127-508.png" alt="">
            <div class="one"><p></p><span></span></div>
            <div class="two"><p></p><span></span></div>
            <div class="three"><p></p><span></span></div>
            <div class="four"><p></p><span></span></div>
            <div class="five"><p></p><span></span></div>
            <div class="six"><p></p><span></span></div>
            <div class="seven"><p></p><span></span></div>
            <div class="eight"><p></p><span></span></div>
            <div class="nine"><p></p><span></span></div>
            <div class="ten"><p></p><span></span></div>
        </div>
    </div>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。