CSS实现大数据热点波纹图

• 2020 年 8 月 22 日
• 筆記
• CSS

CSS实现大数据热点波纹图

实现效果：

涉及知识点：

• 定位
• 盒子阴影
• 动画

思想：以3道波纹为例。首先使用一个div盒子作为圆心，然后每道波纹作为一个div。4个盒子均使用定位属性定位到圆心。然后设置宽高为正方形，并设置border-radius。波纹的显示使用box-shadow阴影实现。动画制作方面，主要是每执行一段时间调整宽高来实现圆的半径变大，并结合opacity透明度来实现若隐若现的感觉。最后通过三道波纹的动画的时差来实现层叠的效果。代码如下：

.a {
            position: relative;
            width: 100px;
            height: 100px;
            margin: 100px auto;
            border: 1px solid red;
        }
        .center {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 8px;
            height: 8px;
            transform: translate(-50%, -50%);
            background-color: blue;
            border-radius: 50%;


        }
        div[class^="border"] {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 8px;
            height: 8px;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            box-shadow: 0 0 12px blue;
            animation: big 1.4s linear infinite;
        }
        div.border2 {
            animation-delay: 0.4s;
        }
        div.border3 {
            animation-delay: 0.8s;
        }
        @keyframes big{
            70% {
                width: 40px;
                height: 40px;
                opacity: 1;
            }
            100% {
                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }

<div class="a">
        <div class="center"></div>
        <div class="border1"></div>
        <div class="border2"></div>
        <div class="border3"></div>
    </div>

可能有读者会说扩大圆的半径为什么不使用scale()属性。因为，使用这个属性后波纹的阴影会跟着扩大。