目錄 背景與邊框第一部分 背景與邊框第二部分 形狀 視覺效果 字體排印 用戶體驗 結構與佈局 過渡與動畫 源碼下載 一、緩動效果 學習和利用貝塞爾曲線，預設支持ease，ease-in，ease-out,ease-in-out和linear等 還提供一個cubic-beizer自定義貝塞爾曲線的起點 ...
目錄
一、緩動效果
- 學習和利用貝塞爾曲線，預設支持ease，ease-in，ease-out,ease-in-out和linear等
- 還提供一個cubic-beizer自定義貝塞爾曲線的起點和終點
- Css中只支持一條貝塞爾曲的運動，不能連續多段
- 對cubic-beizer中控制錨點的水平坐標與垂直坐標互換，就可以得到任何調整函數的反向版本
cubic-beizer(.1,.25,1,.25)是ease的反向調整函數- 水平坐標只能在0~1的範圍內，因為水平坐標表示的是時間
- 垂直坐標可以超過此範圍，表示為運動距離
- 示例代碼
<head> <meta charset="UTF-8"> <title>Document</title> <style> @keyframes bounce{ 60%, 80%, to{ transform: translateY(350px); animation-timing-function: ease-out; /*加速*/ } 70%{ transform: translateY(250px); } 90%{ transform: translateY(300px) } } .ball{ display: inline-block; animation: bounce 3s ease-in; /*減速*/ width: 20px; height: 20px; border-radius: 50%; background: red; } @keyframes bounceEase{ 60%, 80%, to{ transform: translateY(400px); animation-timing-function: ease; } 70% { transform: translateY(300); } 90% { transform: translateY(350px); } } .ball02{ display: inline-block; animation: bounceEase 3s cubic-bezier(.1,.25,1,.25);/*反向ease*/ margin-left: 60px; width: 20px; height: 20px; border-radius: 50%; background: gray; } </style> </head> <body> <div class="ball"> </div> <div class="ball02"></div> </body>
- 利用過渡(transition)實現
- 但需要註意transition-property預設值為all，所有可以過渡的屬性都會被過濾
- 示例代碼:
<head> <meta charset="UTF-8"> <title>Document</title> <style> input:not(:focus) + .callout{ transform: scale(0); transition-duration: .25s; /*覆蓋預設的.5s時間*/ transition-property: transform; /*只過渡transform屬性，不過濾背景等其他屬性*/ } .callout{ transition: .5s cubic-bezier(.25,.1,.3,1.5); /*游標輸出input時，有動畫*/ transition-property: transform;/*只過渡transform屬性，不過濾背景等其他屬性*/ } input{ display: block; } .callout{ background: #fed; position: absolute; max-width: 14em; padding: .6em, .8em; } </style> </head> <body> <label> Your name: <input type="text" id="username" /> <span class="callout">Only letters,number,underscores and hyphens allowed</span> </label> </body>
二、逐幀動畫
- animation-timing-function中的steps函數，主要用他實現幀動畫，他是一個階躍函數，共兩個參數
- 參數一：一個數字，代表時間函數中的間隔數量（必須為正數）
- timing-function是作用於每兩個關鍵幀之間，而不是整個動畫過程
- 參數二：接受start和end兩個值，指定在每個間隔的起點或是終點發生階躍變化，預設end，step-start和step-end分別是steps(1,start)和steps(1,end)的簡寫
- 參數一：一個數字，代表時間函數中的間隔數量（必須為正數）
- 示例代碼：
<head> <meta charset="UTF-8"> <title>Document</title> <style> @keyframes loader{ to{ background-position: -128px 0; } } .wrap{ background: url("../img/frameAnimate.png") no-repeat; width: 32px; height: 50px; background-position: 0px 0px; animation: loader 1s infinite steps(4); } </style> </head> <body> <div class="wrap"></div> </body>
三、閃爍效果
實現兩種閃爍效果，一是平滑閃爍，另一種是幀閃爍（更接近於現實）
- 平滑閃爍
主要是利用animation-iteration-count和animation-direction兩個屬性實現。
1.animation-iteration-count：表示動畫的執行次數
2.animation-direction：表示動畫是否應該輪流反向播放動畫，如果值為alternate時，animation-iteration-count必須是一個偶數，因為是奇數正常播放，偶數反向播放
- 代碼如下：
<style> @keyframes blink-smooth{ to{ color: transparent; } } .wrap{ animation: 1s blink-smooth; animation-iteration-count: 6; animation-direction: alternate; } </style> <div class="wrap">我是平滑的顯示和隱藏三次</div>
- 幀閃爍
利用animation-timing-function屬性的steps實現，因steps指定兩個關鍵幀之間分成幾個片段執行動畫
1.animation-timing-function: steps(1)，然後配合上動畫在50%實現一個透明即可
- 代碼如下：
<style> @keyframes blink-smooth02{ 50% { color: transparent; } } .wrap02{ animation: 1s blink-smooth02; animation-iteration-count: 3; animation-timing-function: steps(1); } </style> <div class="wrap">我是逐幀的顯示和隱藏三次</div>
四、打字效果（只支持單行英文）
需要利用用下特性：
1.等寬字體，然後加上ch這個單位，ch是表示'0'這個字元的寬度.
2.使用動畫讓元素寬度從0變到最大寬度。
3.利用steps(1)讓每個關鍵幀的地方產生動畫 代碼如下：
<head> <meta charset="UTF-8"> <title>Document</title> <style> @keyframes typing { from{ width: 0; } } @keyframes cart{ 50%{ border-color: currentColor; } /*利用steps在關鍵幀位置發生動畫實現*/ } .wrap{ width: 14ch; animation: typing 8s steps(14) , cart 1s steps(1) infinite; white-space: nowrap; overflow: hidden; border-right:1px solid transparent; font-family: Courier New, Courier, monospace; } </style> </head> <body> <div class="wrap">Css is awesome</div> </body>
五、狀態平滑的動畫
利用animation-play-state屬性實現動畫的暫停和播放功能，以及改變背景的定位。示例代碼如下：
<head> <meta charset="UTF-8"> <title>Document</title> <style> @keyframes mic{ to{ background-position: 100% 0; } } .wrap{ background: url("../img/cat.png"); background-repeat: no-repeat; background-size: auto 100%; width: 100px; height: 200px; animation: mic 5s linear infinite alternate; /*直線運動，永不停止，偶數反向運動*/ animation-play-state: paused; } .wrap:hover, .wrap:active{ animation-play-state: running; } </style> </head> <body> <div class="wrap"></div> </body>
六、沿環型路徑平移的動畫
這點很重要，transform中的變形函數（如：rotate，transflate等）都是會影響元素整個坐標系統。也就是說rotate旋轉的時候是旋轉的整個坐標系統。這是實現用一個元素沿環弄路徑平移的基礎。原理圖如下：
- 兩個元素方案，transform-origin + rotate可以實現，但html結構需要兩個元素，如下代碼：
<head> <meta charset="UTF-8"> <title>Document</title> <style> @keyframes spin{ to{ transform: rotate(1turn); } /*順時針旋轉360*/ } @keyframes spin-reverse{ from{ transform: rotate(1turn); } /*逆時針旋轉360*/ } .wrap{ width: 300px; height: 300px; background: yellow; border-radius: 50%; overflow: hidden; padding: 20px; /*加大視窗的寬和高，利用背景從邊框開始的原理，讓運動圖片與邊框有一定的距離*/ } .spin{ width: 30px; height: 30px; border-radius: 50%; overflow: hidden; margin: 0px auto; /*運行元素居中*/ animation: spin 5s infinite linear; transform-origin: 50% 150px; /*定位變換的原點*/ } .spin > img{ width: inherit; height: inherit; animation: spin-reverse 5s infinite linear; --animation: inherit; --animation-direction: reverse; /*由於動畫會控制整個元素+元素內部的元素一起動畫，所以內部的元素要反向動畫*/ } </style> </head> <body> <div class="wrap"> <div class="spin"> <img src="../img/cat.png" alt="" /> </div> </div> </body>
說明：
1..spin的transform-origin: 50% 150px;是進行變換原點的定位；
2.由於需要實現spin環形運動，transform本質特性是元素+元素內部子元素都要隨著變換，因此需要對img元素進行反向變形
3.實現兩種反向變形的方式：A:寫一個反向變形動畫；B：繼承父級的動畫，用animation-direction指定位reverse進行反向。
- 單個元素方案，利用translate和rotate（多次利用），html結構只有一層，代碼如下：
<head> <meta charset="UTF-8"> <title>Document</title> <style> /*反向旋轉必須有，不然位置不對*/ @keyframes spinc{ from{ transform: translate(50%, 150px) rotate(0turn) translate(-50%, -150px) translate(50%, 50%) rotate(1turn) translate(-50%, -50%); /*前三個第一輪旋轉，後三個第二輪旋轉*/ } to{ transform: translate(50%, 150px) rotate(1turn) translate(-50%, -150px) translate(50%, 50%) rotate(0turn) translate(-50%, -50%); } } .wrap{ width: 300px; height: 300px; background: yellow; border-radius: 50%; overflow: hidden; padding: 20px; /*加大視窗的寬和高，利用背景從邊框開始的原理，讓運動圖片與邊框有一定的距離*/ } .avatar{ width: 30px; height: 30px; border-radius: 50%; overflow: hidden; margin: 0px auto; /*運行元素居中*/ display: block; animation: spinc 5s linear infinite; } </style> </head> <body> <div class="wrap"> <img src="../img/cat.png" alt="" class="avatar" /> </div> </body>
說明：
1.一個img然後即要沿環型路徑運動，本身又不能隨著旋轉，那麼就需要兩組位移和旋轉
2.第一組位移 + 旋轉，實現img元素沿環形路徑運動
translate(50%, 150px)
rotate(0turn)
translate(-50%, -150px)
3.第二組位移 + 旋轉，實現img元素本身定位不動
translate(50%, 50%)
rotate(1turn)
translate(-50%, -50%)
- 兩個元素方案主單個元素方案效果圖如下：
