css实现地图上坐标发散闪烁扩散动画效果代码

代码语言:html

所属分类:动画

代码描述:css实现地图上坐标发散闪烁扩散动画效果代码

代码标签: css 地图 坐标 闪烁

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <style>
        .point,.point::before,.point::after{position: absolute;width: 12px; height: 12px; border-radius: 50%;content: ''; }
        .point::before{animation: scale 2s infinite; }
        .point::after{animation: scale2 2s infinite; }
        @keyframes scale{0%{ transform: scale(1); opacity:.9}100%{ transform: scale(6); opacity: 0;}}
        @keyframes scale2{0%{ transform: scale(1);opacity:.9;}100%{ transform: scale(12);opacity:0;}}
        

        .point,.point::before,.point::after{
        /* 设置颜色 */
        background-color: rgba(241, 34, 30, .9);}
        .point2,.point2::before,.point2::after{
        /* 设置颜色 */
        background-color: rgba(0, 221, 254, .9);}
        .po.........完整代码请登录后点击上方下载按钮下载查看

网友评论0