初探keyframes-animation

atinosun 發(fā)布于2019-08-01 15:59 / 1520人閱讀

摘要：被稱(chēng)為關(guān)鍵幀，類(lèi)似于中的關(guān)鍵幀。當(dāng)然之前要對(duì)有一丟丟了解的最好。瀏覽器支持情況給出這樣慕課上的簡(jiǎn)單鼠標(biāo)懸浮時(shí)有彈動(dòng)效果自己有調(diào)整一下變形與動(dòng)畫(huà)鼠標(biāo)放在我身上鼠標(biāo)放在我身上中關(guān)于的效果與代碼

keyframes被稱(chēng)為關(guān)鍵幀，類(lèi)似于flash中的關(guān)鍵幀。在Css3中主要以@keyframes坐開(kāi)頭，后面接著是動(dòng)畫(huà)名稱(chēng)+{}，“{}“中就是不同時(shí)間段的樣式規(guī)則了。當(dāng)然之前要對(duì)transition有一丟丟了解的最好。語(yǔ)法例如：

@keyframes changecolor{

0%{background:red;}

100{background:blue;}?

}

@keyframes中的規(guī)則可以是多個(gè)百分比，在0%~100%之間，在每個(gè)百分比的花括號(hào)內(nèi)寫(xiě)自己需要的樣式，從而達(dá)到在不斷變化的效果。?當(dāng)然，也可以用關(guān)鍵詞from，to代替，0%對(duì)應(yīng)from,100%對(duì)應(yīng)to,也就是”從“一個(gè)效果”到“另一效果，這個(gè)還是比較好理解的。

瀏覽器支持情況W3C給出這樣：

???慕課上的簡(jiǎn)單demo:鼠標(biāo)懸浮時(shí)有彈動(dòng)效果（自己有調(diào)整一下）

style.css:

@keyframes wobble { 

 0% { margin-left: 100px; background:green; } 

 40% { margin-left:150px; background:orange; } 

 60% { margin-left: 75px; background: blue; } 

 100% { margin-left: 100px; background: red; }

 } 

div { margin-left: 100px; width: 100px; height: 100px; background:red; color: #fff; } 

div:hover{ animation: wobble 5s ease .1s; }

index.html:

    
    
     
    
    變形與動(dòng)畫(huà)
    
     
    
    鼠標(biāo)放在我身上

鼠標(biāo)放在我身上
W3C中關(guān)于keyframes的效果與代碼：

http://www.w3school.com.cn/ti...

云服務(wù)器 GPU云服務(wù)器初探webrtc webrtc技術(shù)初探初探騰訊云存儲(chǔ)網(wǎng)關(guān) SQL存儲(chǔ)過(guò)程初探

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/50244.html

相關(guān)文章

初探keyframes-animation

摘要：被稱(chēng)為關(guān)鍵幀，類(lèi)似于中的關(guān)鍵幀。當(dāng)然之前要對(duì)有一丟丟了解的最好。瀏覽器支持情況給出這樣慕課上的簡(jiǎn)單鼠標(biāo)懸浮時(shí)有彈動(dòng)效果自己有調(diào)整一下變形與動(dòng)畫(huà)鼠標(biāo)放在我身上鼠標(biāo)放在我身上中關(guān)于的效果與代碼 keyframes被稱(chēng)為關(guān)鍵幀，類(lèi)似于flash中的關(guān)鍵幀。在Css3中主要以@keyframes坐開(kāi)頭，后面接著是動(dòng)畫(huà)名稱(chēng)+{}，{}中就是不同時(shí)間段的樣式規(guī)則了。當(dāng)然之前要對(duì)transition...

AZmake 2019-08-30 15:45 評(píng)論0 收藏0
web安全初探

摘要：安全初探攻擊攻擊全稱(chēng)跨站腳本攻擊，是為不和層疊樣式表的縮寫(xiě)混淆，故將跨站腳本攻擊縮寫(xiě)為，是一種在應(yīng)用中的計(jì)算機(jī)安全漏洞，它允許惡意用戶(hù)將代碼植入到提供給其它用戶(hù)使用的頁(yè)面中。 web安全初探 XSS攻擊 XSS攻擊全稱(chēng)跨站腳本攻擊，是為不和層疊樣式表(Cascading Style Sheets, CSS)的縮寫(xiě)混淆，故將跨站腳本攻擊縮寫(xiě)為XSS，XSS是一種在web應(yīng)用中的計(jì)算機(jī)安全...

Y3G 2019-08-23 15:56 評(píng)論0 收藏0
web安全初探

摘要：安全初探攻擊攻擊全稱(chēng)跨站腳本攻擊，是為不和層疊樣式表的縮寫(xiě)混淆，故將跨站腳本攻擊縮寫(xiě)為，是一種在應(yīng)用中的計(jì)算機(jī)安全漏洞，它允許惡意用戶(hù)將代碼植入到提供給其它用戶(hù)使用的頁(yè)面中。 web安全初探 XSS攻擊 XSS攻擊全稱(chēng)跨站腳本攻擊，是為不和層疊樣式表(Cascading Style Sheets, CSS)的縮寫(xiě)混淆，故將跨站腳本攻擊縮寫(xiě)為XSS，XSS是一種在web應(yīng)用中的計(jì)算機(jī)安全...

xuhong 2019-08-02 14:30 評(píng)論0 收藏0
PHP socket初探 --- 含著淚也要磕完libevent（三）

摘要：無(wú)數(shù)個(gè)專(zhuān)業(yè)送給啦啦啦啦，開(kāi)始碼注意，將監(jiān)聽(tīng)設(shè)置為非阻塞模式這里值得注意，我們聲明兩個(gè)數(shù)組用來(lái)保存事件和連接歡迎來(lái)到聊天室發(fā)言注意遵守當(dāng)?shù)胤煞ㄒ?guī)使用全局的和非阻塞模式下，注意的寫(xiě)法會(huì)稍微特殊一些。原文地址：https://t.ti-node.com/thread/... 這段時(shí)間相比大家也看到了，本人離職了，一是在家偷懶實(shí)在懶得動(dòng)手，二是好不容易想寫(xiě)點(diǎn)兒時(shí)間全部砸到數(shù)據(jù)結(jié)構(gòu)和算法那里...

suxier 2019-07-01 10:56 評(píng)論0 收藏0
初探 Swoole -- 用 Swoole 啟動(dòng)一個(gè) hello world

摘要：目錄初探用啟動(dòng)一個(gè)內(nèi)存的妙用終于可以啦初級(jí)應(yīng)用實(shí)現(xiàn)用戶(hù)注冊(cè)登錄撰寫(xiě)中展望的局限性分析及我個(gè)人的期待撰寫(xiě)中還記得我們第一個(gè)程序嗎把他保存到訪問(wèn)就可以輸出很多人就是這兩行代碼引入了的大門(mén)我們用來(lái)做一個(gè)看出了吧不依賴(lài)框架等機(jī) 目錄初探 Swoole -- 用 Swoole 啟動(dòng)一個(gè) hello world 內(nèi)存的妙用 -- PHP終于可以 vs JAVA啦初級(jí)應(yīng)用 -- 實(shí)現(xiàn)用戶(hù)注冊(cè)登...

APICloud 2019-06-27 14:10 評(píng)論0 收藏0