初探keyframes-animation

AZmake 發(fā)布于2019-08-30 15:45 / 1775人閱讀

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

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

@keyframes changecolor{

0%{background:red;}

100{background:blue;}?

}

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

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

???慕課上的簡單demo:鼠標(biāo)懸浮時(shí)有彈動效果（自己有調(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:

    
    
     
    
    變形與動畫
    
     
    
    鼠標(biāo)放在我身上

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

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

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

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

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

相關(guān)文章

初探keyframes-animation

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

atinosun 2019-08-01 15:59 評論0 收藏0
web安全初探

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

Y3G 2019-08-23 15:56 評論0 收藏0
web安全初探

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

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

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

suxier 2019-07-01 10:56 評論0 收藏0
初探 Swoole -- 用 Swoole 啟動一個 hello world

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

APICloud 2019-06-27 14:10 評論0 收藏0