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>
複製代碼