【CSS3】CSS3影片——我離前端的炫酷又近了一步
博客說明
文章所涉及的部分資料來自互聯網整理，當然還有自己個人的總結和看法，分享的目的在于共建社區和鞏固自己，參考的資料如有侵權，請聯系本人洗掉！幸好我在，感謝你來！
說明
CSS3 可實作 HTML 元素的影片效果，而不使用 JavaScript 或 Flash，
為了學習前端的動效，我簡直是不折手段，目前就抓著CSS的影片來搞一波，
什么是影片
?老規矩，問句開頭，
在需要變化的時間節點上指定一些關鍵幀，關鍵幀就是此刻所定義的樣式，例如我在1s左移5m，3s左一15m，這時就有兩個關鍵幀，因為這兩個關鍵幀，畫面就發生了位移，那么影片也就產生了，
下面這句話總結到位：影片使元素逐漸從一種樣式變為另一種樣式，
CSS3的影片主要依賴@keyframes和animation來實作，
@keyframes和animation的瀏覽器支持
@keyframes 規則
@keyframes 規則是創建影片，
@keyframes 規則內指定一個 CSS 樣式和影片將逐步從目前的樣式更改為新的樣式，
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
以上的就是一個簡單的影片，關鍵詞 “from” 和 “to”，等同于 0% 和 100%，0% 是影片的開始，100% 是影片的完成，也就是從紅色變成黃色，
為了得到最佳的瀏覽器支持，使用 0% 和 100% 選擇器是最好的選擇，
animation
animation既然影片的關鍵幀都有了，那么就需要把這個關鍵幀落實并系結到某個DOM上，
語法
可以一起寫，也可以分開寫屬性，
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
animation-name
指定要系結到選擇器的關鍵幀的名稱
語法
animation-name: keyframename|none;
// keyframename 指定要系結到選擇器的關鍵幀的名稱
animation-duration
影片指定需要多少秒或毫秒完成
語法
animation-duration: time;
// time 指定影片播放完成花費的時間，
animation-timing-function
指定影片將如何完成一個周期
語法
animation-timing-function: value;
影片函式
-
linear 影片從頭到尾的速度是相同的，
-
ease 默認，影片以低速開始，然后加快，在結束前變慢，
-
ease-in 影片以低速開始
-
ease-out 影片以低速結束，
-
ease-in-out 影片以低速開始和結束，
-
steps(int,start|end）指定了時間函式中的間隔數量（步長），
有兩個引數，第一個引數指定函式的間隔數，該引數是一個正整數（大于 0），
第二個引數是可選的，表示影片是從時間段的開頭連續還是末尾連續，
-
cubic-bezier(n,n,n,n) 貝塞爾曲線
給一個貝塞爾曲線的的一個網站，你會感謝🙏我的哈！地址
animation-delay
定義影片什么時候開始，單位可以是秒（s）或毫秒（ms）
語法
animation-delay: time;
// time 定義影片開始前等待的時間，以秒或毫秒計
animation-iteration-count
定義影片應該播放多少次，
語法
animation-iteration-count: value;
// n 定義應該播放多少次影片
// infinite 指定影片應該播放無限次（永遠）
animation-direction
是否回圈交替反向播放影片，
這個是一個可玩性很高的一個屬性，
語法
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
引數決議
- normal 默認值，影片按正常播放，
- reverse 影片反向播放，
- alternate 影片在奇數次（1、3、5…）正向播放，在偶數次（2、4、6…）反向播放，
- alternate-reverse 影片在奇數次（1、3、5…）反向播放，在偶數次（2、4、6…）正向播放，
- initial 繼承的屬性
- inherit 繼承的屬性
animation-fill-mode
屬性規定當影片不播放時（當影片完成時，或當影片有一個延遲未開始播放時），要應用到元素的樣式，
如果你需要考慮到影片的狀態，可以使用這個屬性，比如保留影片改變后的效果，
語法
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
引數決議
- none 默認值，影片在影片執行之前和之后不會應用任何樣式到目標元素，
- forwards 在影片結束后（由 animation-iteration-count 決定），影片將應用該屬性值，
- backwards 影片將應用在 animation-delay 定義期間啟動影片的第一次迭代的關鍵幀中定義的屬性值，
- both 影片遵循 forwards 和 backwards 的規則，
- initial 繼承的屬性
- inherit 繼承的屬性
animation–play-state
指定影片是否正在運行或已暫停，
語法
animation-play-state: paused|running;
// paused 指定暫停影片
// running 指定正在運行的影片
案例
顏色變換
div的顏色由紅色變為黃色
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>影片測驗</title>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 6s;
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果
順時鐘移動
將div順時針移動
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>影片測驗</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear 2s;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果
總結
其實也看到這些基礎的影片，其實實作起來并不復雜，那些復雜的影片也都是通過這樣基礎的影片構建的，但是是不是會有一個疑問，怎么記得住這樣的屬性的使用呢？
這個問題和問PS的快捷鍵怎么也記不住是一樣的，因為都沒有經常使用，怎么記得住，等畫了上百個復雜影片之后，相信就會對這個影片有比較好的了解啦！
期待后續花樣的影片案例吧！一切才剛剛開始！
感謝
萬能的網路
以及勤勞的自己，個人博客，GitHub測驗，GitHub
公眾號-歸子莫，小程式-小歸博客
如果你感覺對你有幫助的話，不妨給我點贊👍吧，持續關注也行哈！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/393950.html
標籤：其他