课堂案例之热点图案例

小王小王几点了

已于 2022-11-23 08:37:28 修改

阅读量112

点赞数 2

分类专栏： CSS3 文章标签： css3 html html5 vscode

于 2022-11-19 21:14:52 首次发布

本文链接：https://blog.csdn.net/weixin_64875217/article/details/127934797

版权

CSS3 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

课堂案例之热点图案例

1 css代码
2 html代码

1 css代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大数据热点图</title>
    <style>
        body {
            background-color: #333;
        }
        .map {
            position: relative;
            width: 747px;
            height: 617px;
            /* 图片是一张透明的图 所以给body指定background-color */
            background: url(media/map.png) no-repeat;
            margin: 0 auto;
        }
        .city {
            position: absolute;
            top: 227px;
            right: 193px;
        }
        .tb {
            top: 500px;
            right: 80px;
        }
        .gz {
            top: 525px;
            right: 173px;
        }
        .dotted {
            width: 8px;
            height: 8px;
            background-color: #09f;
            border-radius: 50%;
        }
        .city div[class^="pulse"] {
            /* 保证我们小波纹在父盒子里水平、垂直居中 放大之后就会中心向四周发散 */
            /* 因为city父盒子的大小就是dotted的大小，所以想要把pulse水平垂直居中显示，也就是以dotted为中心，需要top50%,left50% */
            /* 因为垂直水平居中后，pluse盒子的左上角在中心点，需要将pulse盒子的中心放到中心点，故向左向上分别移动50% */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 8px;
            height: 8px;
            /* 阴影 */
            /* box-shadow: 水平 垂直 阴影 颜色; */
            box-shadow: 0 0 12px #009dfd;
            border-radius: 50%;
            /* 动画调用 */
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            animation: pulse 1.5s linear infinite;
        }
        .city div.pulse2 {
            /* 比pulse1延迟0.4s在变 */
            animation-delay: 0.4s;
        }
        .city div.pulse3 {
            /* 比pulse1延迟0.8s在变 */
            animation-delay: 0.8s;
        }

        @keyframes pulse {
            /* 开始快后来慢 */
            0% {}
            70% {
                /* 此时用宽和高而不用transform: scale();是因为在缩放的同时，阴影也会受到影响 */
                width: 40px;
                height: 40px;
                /* opacity透明度 */
                opacity: 1;
            }
            100% {
                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }
    </style>
</head>

2 html代码

<body>
    <div class="map">
        <div class="city">
            <!-- 小圆点 -->
            <div class="dotted"></div>
            <!-- 波纹 -->
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <!-- 既有city样式又有tb样式 -->
        <div class="city tb">
            <!-- 小圆点 -->
            <div class="dotted"></div>
            <!-- 波纹 -->
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <!-- 既有city样式又有gz样式 -->
        <div class="city gz">
            <!-- 小圆点 -->
            <div class="dotted"></div>
            <!-- 波纹 -->
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
    </div>
</body>
</html>