地图热点 - 波纹动画效果

使用CSS3动画实现地图热点，用box-shadow实现波纹的效果，首先，我们先回顾一下CSS3的动画，

  1、使用@keyfram来定义动画

    @keyframe  animitionName {

              0% {

              }
             50% {

             }

           100% {

            }

    }

    2、调用动画

      animation: name duration timing-function delay iteration-count direction fill-mode;

       (1) animition-duration: 完成真个动画需要的时间

       (2) timing-function： 速度曲线 ,   所取的属性值主要有 ease/linear/linear/ease-out/steps

       

ease	默认值。动画以缓入缓出的方式开始和结束，中间阶段加速。
linear	匀速
ease-in	动画以缓入的方式开始，逐渐加速
ease-out	动画以缓出的方式结束，逐渐减速
steps	步数       steps(10) - 分10步完成动画

使用  timing-function：steps 可以实现打字机的效果

(3) animation-delay: 延迟n秒之后开始播放动画

(4) animation-iteration-count :  重复次数

(5)

direction 是 CSS 动画属性之一，用于指定动画播放的方向。

direction 属性接受以下几个可能的值：

• normal：默认值。动画按照正常顺序播放。
• reverse：动画按照相反的顺序播放。
• alternate：动画在每次循环中交替反向播放。
• alternate-reverse：动画在每次循环中交替反向播放，并且初始状态是相反的。

(6)  animation-fill-mode:  主要设置动画是否停在最后一帧

fill-mode 属性有以下几个可能的值：

• none：默认值。动画完成后，不会保留任何动画效果，元素会恢复到初始状态。
• forwards：动画完成后，元素将应用动画的最后一个关键帧的样式。如果动画设置了延迟时间，那么在延迟期间元素将保持动画的初始样式。
• backwards：动画未开始时，将应用动画的第一个关键帧的样式。如果动画设置了延迟时间，那么在延迟期间元素将保持动画的第一个关键帧的样式。
• both：动画效果同时包括 forwards 和 backwards。元素将在动画未开始之前应用第一个关键帧的样式，并在动画完成后应用最后一个关键帧的样式。

 

话不多说，上代码，

html部分：

   <div class="map">

        <div class="dot"></div>

        <div class="wave1"></div>

        <div class="wave2"></div>

        <div class="wave3"></div>

    </div>

CSS样式：

 <style>

        .map {

            position: relative;

            width: 700px;

            height: 500px;

            margin: 0 auto;

            border: 1px solid #999;

            background: url('./map.png') 50% 0 no-repeat;

        }

        .dot {

            /* left: 369px;

            top: 270px; */

            position: absolute;

            left: 50%;

            top: 50%;

            transform: translate(-50%,-50%);

            width: 8px;

            height: 8px;

            background-color: rgb(250, 36, 8);

            border-radius: 50%;

        }

        div[class^="wave"] {

            /* position: absolute;

            left: 369px;

            top: 270px; */

            position: absolute;

            left: 50%;

            top: 50%;

            transform: translate(-50%,-50%);

            width: 8px;

            height: 8px;

            border-radius: 50%;

            /* background-color: rgb(245, 235, 104); */

            box-shadow: 0px 0px 15px rgb(250, 36, 8);

            animation: wave 2s linear infinite;

        }

        .wave1 {

            animation-delay: 0.4s;

        }

        .wave2 {

            animation-delay: 0.8s;

        }

        @keyframes wave {

            0% {

            }

            70% {

                width: 30px;

                height: 30px;

                opacity: 1;

            }

            100% {

                width: 40px;

                height: 40px;

                opacity: 0;

            }

        }

    </style>

最后，你知道为什么这里的动画，是宽度和高度的变化，而不使用 transform:scale() 属性呢？