前言

CSS3可以實作HTML元素的影片效果，不使用JavaScript或者是Flash也能實作影片效果，在CSS3中新增了一個transition模塊，通過一些簡單的CSS 事件來觸發元素的外觀變化，使得顯示的效果更加細膩，

一、keyframes定義影片

使用@keyframes規則，可以創建影片，指定變化時用0%到100%，或關鍵詞“from”和“to”，0%是影片的開頭，100%是影片的結尾，我們把名稱定義為move，關鍵代碼如下：

@keyframes move {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(1000px); //沿著X軸移動1000像素，
}
}

二、元素使用影片

1.關鍵代碼

呼叫影片：
animation-name: move;
持續時間：
animation-duration: 2s;

2.使用舉例

我們來看看這個影片是怎么完成的，首先直接建立一個盒子div，然后為其設定樣式，其中有些屬性什么意思不懂可以看下面第三節：CSS3影片常見屬性

div {
            width: 100px;
            height: 100px;
            background-color: powderblue;
            animation-name: move;
            animation-duration: 2s;
            animation-timing-function: ease;
            animation-delay: 2s;
            animation-iteration-count: infinite;
            animation-fill-mode: forwards;
        }

三、CSS3影片常見屬性

CSS3影片常見屬性
屬性名稱	關鍵代碼	備注
影片名稱	annimation-name:影片名稱	影片名稱自主定義
持續時間	animation-duration：2s	單位是s或者ms
運動曲線	animation-timing-function：ease	無
何時開始	animation-delay: 1s;	單位是s或者ms
重復次數	animation-iteration-count: infinite;	iteration 重復的，conut 次數， infinite 無限
是否反方向播放	animation-direction: alternate;	默認的是 normal 如果想要反方向就寫 alternate
影片結束后的狀態	animation-fill-mode: forwards;	默認的是 backwards 回到起始狀態我們可以讓他停留在結束狀態 forwards

常用的影片屬性這么多，單獨使用的話非常的麻煩，我們可以使用簡寫來使用這些屬性，

基本語法如下：

animation:影片名稱持續時間運動曲線何時開始播放次數是否反方向影片起始或者結束狀態

animation: name duration timing-function delay iteration-count direction fill-mode;

值得注意的是，前面兩個屬性name，duration是必要條件，一定要寫

簡寫注意事項：

1.簡寫屬性里面不包含animation-play-state

2.暫停影片：animation-play-state：puased；經常和滑鼠經過等其他配合使用

3.想要盒子走回來，不是跳回來：animation-direction：alternate

4.盒子影片結束后，停在結束位置：animation-fill-mode：forwards

四、速度曲線

屬性名稱	屬性值	備注
勻速	linear	無
默認	ease	以低速開始，加快，結束前變慢
以低速開始	ease-in	無
以低速結束	ease-out	無
以低速開始和結束	ease-in-out	無
步長	steps（）	指定了時間函式中的間隔數量

下面使用步長來舉一個簡單的例子，效果圖如下：

步長可以用于模擬電腦打字的效果，一起來看看如何實作的吧，還是建立一個div盒子，

把要輸出的文字填入：

<div>模擬電腦打字輸入</div>

CSS3代碼部分：

首先使用overflow：hidden把沒顯示的部分隱藏，然后使用animation呼叫影片w，持續4s，forwards影片停留在結束狀態，步長為10，簡單來說就是在4s內顯示10步以完成影片，

@keyframes w {
            0% {
                width: 0;
            }
            100% {
                width: 200px;
            }
        }


div {
            overflow: hidden;
            font-size: 20px;
            white-space: nowrap;  //不換行
            width: 0;
            height: 30px;
            background-color: pink;
            animation: w 4s forwards steps(10);
        }

總結

影片更多的是配個一些2D，3D效果共同使用來達到更好的效果，CSS3的影片相較于JavaScript或者是Flash更加簡潔，在編程的程序中，也會少使用軟體減輕作業量，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/340791.html

標籤：其他

上一篇：Vue CLI構建SPA專案教你手把手創建SPA專案

下一篇：我如何通過不讓它重復結果來正確回圈一個范圍

CSS3 高級教程之影片定義和使用