如何通過css樣式設置動畫，轉換，過渡等界面效果

天我們學習的內容有：過渡，動畫，轉換，伸縮盒子。

可以說今天學習的內容都是重量級的大佬，學好了，使用css3做出酷炫的效果 So Easy！~~

1.過渡

在css3中，有一個屬性可以設置過渡效果。

它就是transition，所謂的過渡效果，指的就是以動畫的形式慢慢演化樣式屬性變化的過程。

A.案例：通過transition設置焦點過渡效果

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{width: 200px;height: 200px;margin:200px;background: url(girl.jpg);border-radius:50%;transition:all 1s linear 0.3s;cursor: pointer;}div:hover{box-shadow: 0px 0px 20px blue;}</style></head><body><div></div></body></html>

注意頁面中的代碼：

第一，我們給div添加了一個hover偽類樣式，當我們鼠標懸停在div上方的時候，會給div盒子添加一個藍色的盒子陰影。

第二，我們給div盒子添加了一個transition樣式，設置的值為：all 1s linear 0.3s;

這四個數據分別對應

transition-property(需要過渡的屬性)：如果設置為all表示所有樣式屬性都需要過渡。

transition-duration(過渡的時間):以秒作為單位，設置過渡的時間

transition-timing-function(過渡的方式):常用的有linear(勻速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等

transition-delay(延遲的時間):以秒作為單位進行延遲，延遲之后開始進行過渡效果。

所以，我們通過transition這個復合屬性設置的過渡效果為：

all:需要過渡所有的屬性

1s:過渡的時間為1秒

linear:勻速過渡

0.3s:在延遲0.3秒之后開始過渡動畫。

如果大家理解了上面的描述，那么也就不難理解咱們鼠標放到div上之后，為啥會慢慢出現藍色的光暈了，就是因為咱們添加了過渡，所以，慢慢的就會給盒子添加陰影效果。

2.動畫：

在學習完了過渡之后，發現咱們可以使用transition去以動畫的形式展示樣式的改變以及變化的過程，這可以幫助我們來實現一些過渡的動畫。

但是，有的時候，我們的需求會更加的復雜，要求會更加的多變，那么，transition可能就無法滿足我們的需要了，我們需要有更加炫酷，復雜的效果呈現。

那么，動畫animation就可以滿足我們的需要。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>@keyframes moveAndChange{0%{left:0px;top:0px;}25%{left:200px;top:200px;background:green;border-radius: 0;}50%{left:400px;top:200px;background:blue;border-radius: 50%;}75%{left:400px;top:0px;background:#ccc;border-radius: 0;}100%{left:0px;top:0px;background:red;border-radius: 50%;}}div{margin:200px;width: 200px;height: 200px;position: absolute;background:red;border-radius:50%;animation: moveAndChange 5s linear 0.5s infinite normal;}</style></head><body><div></div></body></html>

代碼效果如下：

同樣，讓我們來關注編寫的代碼：

1.在樣式中，首先我們使用@keyframes 來定義了一個復雜的動畫，在css3中，新增了@keyframes可以來幫助我們添加動畫。代碼如下：

/*動畫的名字叫做moveAndChange*/

@keyframes moveAndChange{

/*動畫最初的時候，將left設置為0px，top設置為0px*/

0%{

left:0px;

top:0px;

}

/*當動畫進行到25%的時候，使用動畫將left過渡到200px，top過渡到200px，

背景顏色過渡為綠色，圓角過渡為0(無圓角)*/

25%{

left:200px;

top:200px;

background:green;

border-radius: 0;

}

/*當動畫進行到50%的時候，使用動畫將left過渡到400px，top過渡到200px，

背景顏色過渡為藍色，圓角過渡為50%(正圓)*/

50%{

left:400px;

top:200px;

background:blue;

border-radius: 50%;

}

/*當動畫進行到75%的時候，使用動畫將left過渡到400px，top過渡到0，

背景顏色過渡為灰色，圓角過渡為0(無圓角)*/

75%{

left:400px;

top:0px;

background:#ccc;

border-radius: 0;

}

/*當動畫結束的時候，使用動畫將left過渡到0x，top過渡到0px，

背景顏色過渡為紅色，圓角過渡為50%(正圓)*/

100%{

left:0px;

top:0px;

background:red;

border-radius: 50%;

}

這是一個比較復雜的動畫效果，可以發現，它通過百分比的形式將一個完整的動畫拆分成了5個部分，每個部分都有不同的樣式效果，而當我們采用該動畫的元素就會按照設置的順序和樣式效果進行動畫的過渡和展示。

2.上面我們只是通過@keyframes創建了一個動畫，我們還需要通過特定的語法來使用這個動畫。

就是下面這句代碼了：

animation: moveAndChange 5s linear 0.5s infinite normal;

它是一個復合屬性，設置了6個值，分別對應：

animation-name(設置動畫的名稱)：用來設置動畫的名字，我們這里寫的是moveAndChange ，也就是說我們就是要使用我們剛剛創建的動畫。

animation-duration(設置整個動畫的時間):以秒作為單位，我們這里寫的是5s，表示整個動畫的時間為5秒

animation-timing-function(設置播放動畫的方式)：播放動畫的方式，常用的有linear(勻速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等，我們使用的是linear勻速播放動畫。

animation-delay(設置動畫的延遲):以秒作為單位，我們寫的是0.5s，表示延遲0.5秒之后開始播放動畫。

animation-iteration-count(設置動畫播放的次數):播放動畫的次數，我們這里寫的是infinite ，表示動畫將會被播放無限次，如果寫數字，那么就會播放數字對應的次數。

animation-direction(設置是否反向播放動畫)：我們寫的是normal，表示正常播放動畫，如果寫的是

alternate則表示要反向播放動畫，大家也可以自己試一試這個效果。

最終，我們通過@keyframes創建動畫，通過animation設置動畫，成功完成了這個復雜的動畫效果。

3.轉換

在css3中，我們通過transform屬性可以設置元素的轉換效果，具體的效果如下：

A.平移

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body{background:pink;}div{width: 200px;height: 200px;position: absolute;background: green;left:0px;top:0px;transform: translate(300px,300px);}</style></head><body><div></div></body></html>

代碼效果如下：

如上圖所示，本來div盒子的位置是left:0,top:0;

但是我們通過transform: translate(300px,300px);將盒子進行了偏移，所以，盒子的位置發生了改變。

B.旋轉

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: rotate(45deg);}</style></head><body><div></div></body></html>

代碼效果如下：

如上圖所示，本來div盒子應該是四四方方的。

但是，經過我們的代碼transform: rotate(45deg); //deg為單位，表示度數。

進行了45度的旋轉之后，呈現出來的就是一個菱形的盒子了，旋轉的正方向為順時針，負方向為逆時針。

C.縮放

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: scale(0.5,0.25);}</style></head><body><div></div></body></html>

代碼效果如下：

如上圖所示，本來盒子的寬高為200*200,而我們通過transform: scale(0.5,0.25);進行的縮放

scale的第一個參數為0.5,表示橫向縮小為0.5倍

scale的第二個參數為0.25，表示縱向縮小為0.25倍。

scale的參數如果為1，則表示不進行任何縮放，小于1就是做縮小，而大于1表示做放大。

小結：transform轉換中其實還包含了skew(傾斜)，matrix(矩陣轉換)，相對來說用到的不是特別多，所以在本文中我們便不再做介紹。

4.flex布局

Flex布局，可以簡便、完整、響應式地實現各種頁面布局。

Flex是Flexible Box的縮寫，翻譯成中文就是“彈性盒子”，用來為盒裝模型提供最大的靈活性。任何一個容器都可以指定為Flex布局。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: flex-start}.parent div{width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>

代碼效果如下：

如圖所示，咱們通過display:flex將.parent元素設置為了flex盒子，那么子元素將會按照justify-content設置的方式進行元素的排列，目前看來，和我們沒有設置flex盒子的效果是一致的。

接下來我們更改一下，將justify-content設置為flex-end，效果如下圖所示：

所以我們就應該發現，flex-start是讓所有的子元素從父元素的左側開始排列

而flex-end是讓所有的子元素從元素的右側開始排列。

我們再來更改一下，將justify-content設置為center，效果如下圖所示：

更厲害了，子元素在父盒子的中央位置排列顯示了。

然后，我們再將justify-content設置為space-around，效果如下圖所示：

它是平均分配的形式為每一個子元素設置了間距，但是看起來有點變扭。

所以我們推薦將justify-content設置為space-between，效果如下圖：

我們還可以通過flex-wrap來設置子元素是否換行顯示，以及flex-direction設置子元素排列的順序。

這兩個屬性可以設置的值如下：

flex-wrap: nowrap;//不換行，會自動收縮

flex-wrap: warp;//換行，會自動收縮

flex-wrap: warp-reverse;//反轉，從默認的從上到下排列反轉為從下到上。

flex-direction:row; //從左至右一行一行進行子元素的排列

flex-direction:column; //從上到下一列一列進行子元素的排列

flex-direction:row-reverse; //從右至左一行一行進行子元素的排列

flex-direction:column-reverse; //從下到上一列一列進行子元素的排列

案例代碼如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;flex-wrap: nowrap;flex-direction: row-reverse;}.parent div{width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div></body></html>

我們設置了flex-wrap: nowrap;（不換行，壓縮所有的子元素在一行中顯示），以及flex-direction: row-reverse;（反向排列）

代碼效果如下：

如果設置為flex-wrap: warp（換行顯示無法在一行顯示的子元素），則效果如下：

如果將flex-direction: column;,則會縱向排列元素，效果如下圖：

除了上面的這些給伸縮盒子父元素設置的樣式之外，我們還可以可以伸縮盒子的子元素設置flex屬性，用來設置平均分配整個父盒子的空間。

代碼如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div{flex:1;width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>

效果如下：

如上圖所示，每個盒子平均分配了父盒子的空間，原本寬度為20%，現在被拉伸了。

除此之外，咱們還可以使用flex屬性進行進一步的設置，代碼如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div:nth-of-type(1){flex:1;border:1px solid #ccc;background:red;}.parent div:nth-of-type(2){flex:2;border:1px solid #ccc;background:green;}.parent div:nth-of-type(3){flex:2;border:1px solid #ccc;background:blue;}.parent div:nth-of-type(4){flex:1;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>

效果如下圖：

我們分別給四個子盒子設置了flex:1 , flex:2, flex:2 ,flex:1.

這是什么意思呢？

四個flex加起來一共是6.那么第一個盒子就占據整個父盒子的1/6寬度。

同理，另外三個盒子分別占據2/6,2/6,1/6的寬度，所以就形成了我們現在看到的效果。

原文來源于：黑馬程序員社區

學習資源：

想學習css，可以關注：黑馬程序員頭條號，后臺回復：css

周在給學生講授JavaScript課程中setInterval方法時，想到了我們在網上看到的各類GIF動圖比較有意思，就將其引入到教學中，教學內容設計如果通過HTML5與JavaScript實現網頁類似GIF效果的動態圖。于是在網上搜集了部分gif格式動圖，將每一個Gif動圖分解為一組jpg格式圖片，再采用setInterval與html5 Canvas進行動畫的實現。通過學習可以讓學生進一步了解canvas動畫實現的過程與原理。并將其發布到頭條，也希望對有興趣的初學者了解HTML5 Canvas等有所幫助。圖片分組圖片素材如下：

素材一

實現動畫的素材我們已經給出，主要通過gif動圖導出一組圖片，下面對html5動畫實現過程進行簡單說明。

基本思路

實現其動畫的基本思路是通過HTML5提供的canvas元素進行圖片的繪制與展示，借助setInterval方法實現間隔指定時間調用新的圖片實現重新繪圖。其中繪圖主要使用drawImage方法進行繪圖，最終通過圖片依次重繪實現動畫效果。具體實現過程如下：

HTML5 Canvas設置

在頁面body部分添加Canva標簽，設置其id屬性為canv，寬度為600，高度為400,編寫代碼描述如下圖：

添加畫布元素

canvas瀏覽效果

加載圖片資源

使用Canvas借助JavaScript提供的drawImage方法進行繪圖，需要提供要繪制的圖片資源即繪圖的坐標位置。該方法原型如下：

drawImage方法原型

因此我們需要加載圖片資源，本例由于需要調用多個img實現定時不同圖片的繪制，因此我們可以使用數組存儲所加載的圖片資源。本例圖片數量為14，因此我們數組長度為14。使用素組存儲圖片實現代碼如下：

加載圖片資源代碼

定義頁面加載事件onload

本例設計在頁面加載時自動播放動畫，因此需要在JavaScript腳本中添加頁面onload事件，在事件中編寫繪圖相關代碼，主要代碼包括獲取畫布canva與實例化繪圖對象context。部分代碼描述如下：

onload事件及繪圖初始化

使用setInterval實現動畫

使用setInterval方法實現動畫主要需要定義回調函數與回調函數觸發執行的周期，本例中我們使用匿名函數作為回調函數，觸發周期設置為100毫秒。setInterval函數定義如下：

setInterval函數

在定義完函數之后可在其匿名函數函數體部分寫入繪圖方法dramImage(),實現周期調用不同圖片資源進行繪圖，最終展示出動畫效果。為了保證循環調用14張圖片，我們需要設置一計數全局變量i，由于我們圖片采用數組存儲，下標為數組，且從0-13進行編號，因此當計數值小于13時自動+1，指向下一數組下標，當為13時，設置計數值為0，回到數組第一元素，最終實現數組訪問下標的循環。setInterval實現完整代碼如下：

setInterval完整代碼

實現效果展示

HTML動畫效果展示

本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可以聯系作者，共同探討。期待大家關注！如需案例完整代碼請關注并私信，往期前端設計文章鏈接如下：

前端設計-JavaScript中的值、引用傳遞與垃圾回收
前端設計-JavaScript美女拼圖游戲開發實例
前端設計- JavaScript驗證碼制作及實例分析
前端設計-Ajax技術及實例展示
前端設計-響應式頁面開發基礎
Web開發前端、后端與全棧的區別是什么？

頁動畫圖像、Flash 動畫和 JavaScript 實現的效果圖片，我們用最基礎的CSS也能實現。制作一個簡單的gif動畫圖，上圖就是效果圖。

用CSS3制作動畫圖，你需要了解兩個css屬性。

其一是 @keyframes

因為它限定了CSS 樣式和動畫逐步從目前的樣式更改為新的樣式的變化過程。瀏覽器兼容的時候需要在keyframes上加前綴，-webkit-, -ms- 或 -moz- 。

keyframes中有兩個屬性，from和to，from里面的內容定義動畫開始的狀態，to記錄動畫結束的狀態。@keyframes后面緊跟的是動畫的名字，這個可以自定義取名字，比如我取 gifname，頁面某個標簽元素使用這個動畫時候，就需要用到這個名字。

@keyframes gifname
{
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes gifname /* Safari 與 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

from和to也可以用百分比來表示動畫的過程，可以用百分比的話，就可以把動畫的內容定義得更加豐富了。

@keyframes gifname
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
 
@-webkit-keyframes gifname /* Safari 與 Chrome */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

比如我在一個div元素上用到這個動畫

div
{
    animation: gifname 5s;
    -webkit-animation: gifname 5s; /* Safari 與 Chrome */
}

其二是 animation

剛剛我們在div元素中看到的animation就是我們要認識的第二個屬性。animation其實是一堆屬性的簡寫。比如看下面一句代碼：

 animation:gifname 2s step-start 1s infinite alternate;

這一句其實可以寫成

    animation-name: gifname;
    animation-duration: 2s;
    animation-timing-function: step-start;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;

animation-name：動畫名稱

這里是引入 @keyframes 動畫的名稱。

animation-duration：動畫的持續時間

單位可以是秒(s)，也可以是毫秒(ms)

animation-timing-function：動畫的過度類型

屬性值 :默認是 "ease"

linear：線性過渡。等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0)

ease：平滑過渡。等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0)

ease-in：由慢到快。等同于貝塞爾曲線(0.42, 0, 1.0, 1.0)

ease-out：由快到慢。等同于貝塞爾曲線(0, 0, 0.58, 1.0)

ease-in-out：由慢到快再到慢。等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)

cubic-bezier(n,n,n,n):在 cubic-bezier 函數中自己的值。可能的值是從 0 到 1 的數值。

step-start:馬上跳到動畫每一結束幀的狀態

animation-delay：動畫延遲時間

默認是 0。

animation-iteration-count：動畫循環次數

默認是 1。屬性值infinite 代表無數次。

animation-direction：動畫是否在下一周期逆向地播放

屬性值

normal：正常方向

reverse：反方向運行

alternate：動畫先正常運行再反方向運行，并持續交替運行

alternate-reverse：動畫先反運行再正方向運行，并持續交替運行

另外還有兩項屬性：

animation-fill-mode:設置動畫播放后的效果

取值:

none:初始樣式,不改變默認行為.(默認行為)

forwards:動畫播放結束后保持最后一個狀態;

backwards:結束后保持第一個狀態;

animation-play-state :檢索或設置對象動畫的狀態

屬性值

animation-play-state:running | paused;

running:運動

paused: 暫停

animation-play-state:paused; 當鼠標經過時動畫停止，鼠標移開動畫繼續執行

到此為止，屬性我們都學習完了，開始實踐部分：

首先準備好我們需要的圖片，這里我使用了九張圖片。

我把九張圖片放在九個<li></li>標簽里。所有li標簽用ul標簽包含起來。然后把ul放在一個div標簽里，div設置成一張圖片的大小，然后通過逐幀移動ul元素實現動畫。

最后的處理，把超出div元素的部分隱藏即可。然后就得到了文章開始時候的圖片了。

最關鍵的，上代碼：

<!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>css動畫</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
        margin-right: 0;
    }
#div{
    width:100px;
	height:100px;
    border: 1px solid #fff;
    overflow: hidden;
	margin: 100px 0 0 100px;
    }
    #box{
     width:900px;
     height:100px;   
    border: 1px solid #fff;
    overflow:visible;
    position:relative;
    animation:myfirst 2s step-start 1s infinite ;
    /* Firefox: */
	-moz-animation:myfirst 2s step-start 1s infinite ;
	/* Safari and Chrome: */
	-webkit-animation:myfirst 2s step-start 1s infinite ;
	/* Opera: */
	-o-animation:myfirst 2s step-start 1s infinite ;
    }
    #box li{
        float: left;
        width:98px;
        height:100px; 
        border:1px solid #fff;
    }
    li img{
        width:100%;
        height:100%;
    }
    @keyframes myfirst
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
    55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
  100% {left:0px; top:0;}
}
@-moz-keyframes myfirst /* Firefox */
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
  55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
  100% {left:0px; top:0;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
  55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
  100% {left:0px; top:0;}
}

@-o-keyframes myfirst /* Opera */
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
  55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
   100% {left:0px; top:0;}
}

    </style>
</head>
<body>
    <div id="div">
        <ul id="box">
            <li><img src="./img/o1.jpg"/></li>
            <li><img src="./img/o2.jpg"/></li>
            <li><img src="./img/o3.jpg"/></li>
            <li><img src="./img/o4.jpg"/></li>
            <li><img src="./img/o5.jpg"/></li>
            <li><img src="./img/o6.jpg"/></li>
            <li><img src="./img/o7.jpg"/></li>
            <li><img src="./img/o8.jpg"/></li>
            <li><img src="./img/o9.jpg"/></li>
        </ul>
    </div>
</body>
</html>

最后嘮叨一句，該動畫不支持IE9及更早版本的IE瀏覽器。

喜歡的話，就點贊支持一下吧！

在線咨詢

上一篇：數據可視化-使用Python進行圖表疊加
下一篇：HTML 表格

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

如何通過css樣式設置動畫，轉換，過渡等界面效果

基本思路

HTML5 Canvas設置

加載圖片資源

定義頁面加載事件onload

使用setInterval實現動畫

實現效果展示

其一是 @keyframes

其二是 animation

您的項目需求