css3实现类似地图定位循环扩散光圈效果

1.效果图,重点opacity,animation,transform:scale

2.html

html 复制代码
<div class="icon-warnCom">
        <icon class="icon-warns"><i class="dot"></i><i class="pulse"></i></icon>
    </div>
    <div class="icon-warnCom1">
        <icon class="icon-warns"><i class="dot"></i><i class="pulse"></i></icon>
    </div>
    <div class="icon-warnCom2">
        <icon class="icon-warns"><i class="dot"></i><i class="pulse"></i></icon>
    </div>

3.css

css 复制代码
 body {
            width: 100%;
            height: 100%;
            background-color: black;
        }
        
        @keyframes warn {
            0% {
                transform: scale(0);
                opacity: 0.0;
            }

            25% {
                transform: scale(0);
                opacity: 0.1;
            }

            50% {
                transform: scale(0.1);
                opacity: 0.3;
            }

            75% {
                transform: scale(0.2);
                opacity: 0.5;
            }

            100% {
                transform: scale(0.3);
                opacity: 0.0;
            }
        }
        
        .icon-warnCom {
            position: absolute;
            width: 12px;
            height: 12px;
            background-color: #ffd803;
            border-radius: 100%;
            top: 100px;
            left: 100px;
        }

        .icon-warns {
            position: relative;
            width: 100%;
            height: 100%;
            display: block;
        }
        /* 保持大小不变的小圆圈  */
        .dot {
            position: absolute;
            left: -44px;
            top: -44px;
            width: 60px;
            height: 60px;
            -webkit-border-radius: 100;
            -moz-border-radius: 100;
            border: 20px solid #f6c100;
            border-radius: 100%;
            z-index: 2;
            opacity: 0;
            -webkit-animation: warn 2.5s ease-out;
            -moz-animation: warn 2.5s ease-out;
            animation: warn 2.5s ease-out;
            -webkit-animation-iteration-count: infinite;
            -moz-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
        }

        /* 产生动画(向外扩散变大)的圆圈  */
        .pulse {
            position: absolute;
            left: -44px;
            top: -44px;
            width: 60px;
            height: 60px;
            border: 20px solid #f6c100;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            z-index: 1;
            opacity: 1;
            -webkit-animation: warn 1.5s ease-out;
            -moz-animation: warn 1.5s ease-out;
            animation: warn 1.5s ease-out;
            -webkit-animation-iteration-count: infinite;
            -moz-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
        }

       

        .icon-warnCom1 {
            position: absolute;
            width: 12px;
            height: 12px;
            background-color: #ffd803;
            border-radius: 100%;
            top: 50px;
            left: 50px;
        }

        .icon-warnCom2 {
            position: absolute;
            width: 12px;
            height: 12px;
            background-color: #ffd803;
            border-radius: 100%;
            top: 100px;
            left: 50px;
        }
相关推荐
_未完待续4 分钟前
框架实战指南-组件参考
前端·vue.js
李文旺4 分钟前
图片加载优化-Nextjs与webpack源码
前端·react.js
不想当小卡拉米4 分钟前
高德地图上marker过多(超过3000个)渲染卡顿过慢问题解决
前端
dalancon7 分钟前
WMShell初始化
前端
半花8 分钟前
【Vue】通信组件
前端·vue.js
劫大大9 分钟前
前端开发公众号或服务号,本地怎么与后端测试服接口打通呢
前端·微信
芒果12510 分钟前
【转载】vue3 Ts axios 封装
前端
蓝倾10 分钟前
京东商品SKU数据采集方式及接口说明
前端·后端·api
SimonKing12 分钟前
一文搞定:SpringBoot集成语音识别模型FunASR
java·人工智能·后端
前端 贾公子12 分钟前
vue如何在data里使用this
前端·javascript·vue.js