CSS3动画热点图

最新推荐文章于 2023-08-09 21:03:29 发布

Kong_十六

最新推荐文章于 2023-08-09 21:03:29 发布

阅读量279

点赞数 1

分类专栏： # 练习实例 # H5+C3 文章标签： CSS3动画热点图

本文链接：https://blog.csdn.net/qq_42383764/article/details/105059407

版权

练习实例同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

H5+C3

10 篇文章 0 订阅

订阅专栏

先看效果图

动态的喔

看代码吧

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-">
    <title>热点图</title>
    <style>
        body {
            background-color: #333;
        }

        .map {
            position: relative;
            width: 747px;
            height: 616px;
            background: url(img/map.png) no-repeat;
            margin: 0 auto;
        }

        .hotSpot {
            position: absolute;
            top: 227px;
            right: 193px;
            color: #fff;
        }

        .tb {
            top: 500px;
            right: 80px;
        }

        .gz {
            top: 540px;
            right: 191px;
        }

        .dotted {
            width: 8px;
            height: 8px;
            background-color: #09f;
            border-radius: 50%;
        }

        .hotSpot div[class^="wave"] {
            /* 垂直居中对齐 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px #009dfd;
            border-radius: 50%;
            animation: wave 1.2s linear infinite;
        }

        .hotSpot div.wave2 {
            animation-delay: .4s;
        }

        .hotSpot div.wave3 {
            animation-delay: .8s;
        }

        @keyframes wave {
            0% {}

            70% {
                width: 40px;
                height: 40px;
                opacity: 1;
            }

            100% {
                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div class="map">
        <div class="hotSpot">
            <div class="dotted"></div>
            <div class="wave1"></div>
            <div class="wave2"></div>
            <div class="wave3"></div>
        </div>
        <div class="hotSpot tb">
            <div class="dotted"></div>
            <div class="wave1"></div>
            <div class="wave2"></div>
            <div class="wave3"></div>
        </div>
        <div class="hotSpot gz">
            <div class="dotted"></div>
            <div class="wave1"></div>
            <div class="wave2"></div>
            <div class="wave3"></div>
        </div>
    </div>
</body>

</html>

背景图

Kong_十六

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS3动画热点图

先看效果图动态的喔看代码吧<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
复制链接

扫一扫