CSS3 動畫

時間 2020-08-13

標籤 css3 css 動畫欄目 CSS 简体版

原文原文鏈接

1. 動畫html

動畫（animation）是CSS3中具備顛覆性的特徵之一，可經過設置多個節點來精確控制一個或一組動畫，經常使用來實現複雜的動畫效果。
相比較過渡，動畫能夠實現更多變化，更多控制，連續自動播放等效果。動畫

1.1 動畫的基本使用ui

製做動畫分爲兩步：
　　1.先定義動畫
　　2.再使用（調用）動畫url

1. 用keyframes 定義動畫（相似定義類選擇器）spa

@keyframes 動畫名稱 {
   0%{
        width:100px;
   }  
   100%{
        width:200px;
   }
}

動畫序列code

　　1>0% 是動畫的開始，100% 是動畫的完成。這樣的規則就是動畫序列。
　　2>在 @keyframes 中規定某項 CSS 樣式，就能建立由當前樣式逐漸改成新樣式的動畫效果。
　　3>動畫是使元素從一種樣式逐漸變化爲另外一種樣式的效果。您能夠改變任意多的樣式任意多的次數。
　　4>請用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同於 0% 和 100%。orm

2. 元素使用動畫htm

div {
       width: 200px;
       height: 200px;
       background-color: aqua;
       margin: 100px auto;
       /* 調用動畫 */
       animation-name: 動畫名稱;
       /* 持續時間 */
       animation-duration: 持續時間;
    }

1.2動畫經常使用屬性blog

1.3 動畫簡寫屬性ci

　　animation：動畫名稱持續時間運動曲線什麼時候開始播放次數是否反方向動畫起始或者結束的狀態;

　　animation: myfirst 5s linear 2s infinite alternate;

　　1>簡寫屬性裏面不包含 animation-play-state
　　2>暫停動畫：animation-play-state:   puased;   常常和鼠標通過等其餘配合使用
　　3>想要動畫走回來，而不是直接跳回來：animation-direction   ： alternate
　　4>盒子動畫結束後，停在結束位置： animation-fill-mode ：   forwards

案例：熱點圖案例

<!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-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: #333;
        }
        
        .map {
            position: relative;
            width: 747px;
            height: 616px;
            background: url(media/map.png) no-repeat;
            margin: 0 auto;
        }
        
        .city {
            position: absolute;
            top: 227px;
            right: 193px;
            color: #fff;
        }
        
        .tb {
            top: 500px;
            right: 80px;
        }
        
        .dotted {
            width: 8px;
            height: 8px;
            background-color: #09f;
            border-radius: 50%;
        }
        
        .city div[class^="pulse"] {
            /* 保證咱們小波紋在父盒子裏面水平垂直居中 放大以後就會中心向四周發散 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px #009dfd;
            border-radius: 50%;
            animation: pulse 1.2s linear infinite;
        }
        
        .city div.pulse2 {
            animation-delay: 0.4s;
        }
        
        .city div.pulse3 {
            animation-delay: 0.8s;
        }
        
        @keyframes pulse {
            0% {}
            70% {
                /* transform: scale(5);  咱們不要用scale 由於他會讓 陰影變大*/
                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="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="city tb">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
    </div>
</body>

</html>

1.4 速度曲線細節

　　animation-timing-function：規定動畫的速度曲線，默認是「ease」

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。