Animation实现热点图

时间 2019-11-05

标签 animation 实现热点繁體版

原文原文链接

实现效果

其实实现效果是动图的，哪一个大佬能教我怎么才能把网页实现的动画效果显示出来！ css

css3中有三种动画的属性，`transform, transition, animation`。

transform 描述的是元素的静态样式。好比transform:rotate(180deg)效果是直接显示转完180度的样式。加上transition过渡属性才能让它从一种状态转变为另外一种状态。
transition须要触发一个事件来发生变换。通常用:hover
animation 不须要触发事件就能够随着时间的变换来改变元素的css样式。

实现步骤

建立动画

//关键帧 定义动画在不一样阶段的状态
@keyframes 动画名称{
from{}  //开始状态，0%
  to{}  //结束状态，100%
}
//百分比表明一个动画周期对应的某个时间。
复制代码

绑定动画

把建立好的动画经过animation属性绑定到一个选择器上，不然就不会有效果
好比我把动画p绑定到.p1,.p2,.p3上
.p1,.p2,.p3{
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 8px;
            height: 8px;
            border-radius: 50%;
            box-shadow: 0 0 12px #009fd9;
            animation: p 1.2s linear infinite;//动画名 动画时长 
            //linear:匀速播放 infinite：播放次数为无限播放
        }
复制代码

实现居中效果：
* 写法一：
position: //先让其左上角居中
            absolute;
            top:50%;
            left: 50%;
            //translate:移动,百分比是自身元素的宽度和高度的百分比
            transform: translate(-50%,-50%);
* 写法二：
position: 
            absolute;
            top:50%;
            left: 50%;
            //根据元素的宽度和高度用margin调整位置,这种状况当元素宽高度修改，margin也要跟着修改
           margin-top: px;
           margin-left: px ;
复制代码

animation-delay:三个圆不一样时间开始可以让他们在同一时间大小不一致实现波纹效果。

实现热点图所有代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
         background-color:#333333 ;
        }
        .map{
            width: 747px;
            height: 617px;
            margin: 0 auto;
            background: url("map.png");
        }
        .city{
            position: absolute;
            top:235px;
            right:535px;

        }
        .taibei{

            top:507px;
            right: 419px;
        }
        .guangzhou{
            top:535px;
            right: 523px;
        }
        .dotted{
            width: 8px;
            height: 8px;
            border-radius: 50px;
            background-color: #0074D9;
        }
        .p1,.p2,.p3{
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 8px;
            height: 8px;
            border-radius: 50%;
            box-shadow: 0 0 12px #009fd9;
            animation: p 1.2s linear infinite;
        }
        .p2{
            animation-delay: 0.4s;/*什么时候开始*/
        }
        .p3{
            animation-delay:0.8s ;
        }
        @keyframes p { 
            70%{
                width: 40px;
                height: 40px;
                opacity: 1;//透明度
            }
            100%{
                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div class="map">


        <div class="city">
            <div class="dotted"></div>
            <div class="p1"></div>
            <div class="p2"></div>
            <div class="p3"></div>
        </div>
        <div class="city taibei">
            <div class="dotted"></div>
            <div class="p1"></div>
            <div class="p2"></div>
            <div class="p3"></div>
        </div>
        <div class="city guangzhou">
            <div class="dotted"></div>
            <div class="p1"></div>
            <div class="p2"></div>
            <div class="p3"></div>
        </div>
    </div>
</body>
</html>
复制代码

Animation实现热点图

实现效果

css3中有三种动画的属性，transform, transition, animation。

实现步骤

实现热点图所有代码

css3中有三种动画的属性，`transform, transition, animation`。