初探keyframes-animation

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

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

keyframes被稱為關(guān)鍵幀，類似于flash中的關(guān)鍵幀。在Css3中主要以@keyframes坐開頭，后面接著是動(dò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)寫自己需要的樣式，從而達(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)畫
    
     
    
    鼠標(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ǔ)過程初探

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

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

相關(guān)文章

初探keyframes-animation

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

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

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

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

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

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

摘要：無數(shù)個(gè)專業(yè)送給啦啦啦啦，開始碼注意，將監(jiān)聽設(shè)置為非阻塞模式這里值得注意，我們聲明兩個(gè)數(shù)組用來保存事件和連接歡迎來到聊天室發(fā)言注意遵守當(dāng)?shù)胤煞ㄒ?guī)使用全局的和非阻塞模式下，注意的寫法會(huì)稍微特殊一些。原文地址：https://t.ti-node.com/thread/... 這段時(shí)間相比大家也看到了，本人離職了，一是在家偷懶實(shí)在懶得動(dòng)手，二是好不容易想寫點(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)用戶注冊(cè)登錄撰寫中展望的局限性分析及我個(gè)人的期待撰寫中還記得我們第一個(gè)程序嗎把他保存到訪問就可以輸出很多人就是這兩行代碼引入了的大門我們用來做一個(gè)看出了吧不依賴框架等機(jī) 目錄初探 Swoole -- 用 Swoole 啟動(dòng)一個(gè) hello world 內(nèi)存的妙用 -- PHP終于可以 vs JAVA啦初級(jí)應(yīng)用 -- 實(shí)現(xiàn)用戶注冊(cè)登...

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