网页制作 
首页 > 网页制作 > 浏览文章

如何使用css实现数据热点效果

(编辑:jimmy 日期: 2024/11/2 浏览:3 次 )

效果如下:

如何使用css实现数据热点效果

分析

1.这里看到的大概有三个圈 围着点在做放大动画

所以我们写四个盒子 点+3个圈

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .city {
            width: 200px;
            height: 200px;
            background-color: gray;
            position: relative;
        }
        
        .pul {
            width: 8px;
            height: 8px;
            background-color: #09f;
            border-radius: 50%;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            position: absolute;
        }
        /* 选择类名有pul开头的属性 */
        
        .city div[class^="pul"] {
            /* 居中 */
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            box-shadow: 0px 0px 10px #09f;
        }
    </style>
</head>

<body>
    <div class="city">
        <div class="pul"></div>
        <div class="pul1"></div>
        <div class="pul2"></div>
        <div class="pul3"></div>
    </div>
</body>

</html>

如何使用css实现数据热点效果

写完后 我们是需要给这三个圈 加放大的动画 但是可以看到 三个圈并不是同时触发动画的 所以需要给三个圈 设置不同的延迟时间 定义动画

/*定义动画*/
  @keyframes pul {
            0% {}
            50% {
                width: 20px;
                height: 20px;
                opacity: 1;

            }

            100% {
                width: 50px;
                height: 50px;
                opacity: 0;
            }
        }

使用动画

.city>div:nth-child(2) {
            animation: pul 2s .5s linear infinite;
        }
        
        .city>div:nth-child(3) {
            animation: pul 2s 1s linear infinite;
        }
        
        .city>div:nth-child(4) {
            animation: pul 2s 1.5s linear infinite;
        }

效果如下:

如何使用css实现数据热点效果

背景图可以自己找 这里就不发了 发上来下载要钱

上一篇:CSS实现鼠标滑过卡片上浮效果的示例
下一篇:详解background属性的8个属性值(面试题)
一句话新闻
微软与英特尔等合作伙伴联合定义“AI PC”:键盘需配有Copilot物理按键
几个月来,英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法,朝着更多的AI功能迈进。在近日,英特尔在台北举行的开发者活动中,也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 SiteMap