怎么用html5與css3完成google涂鴉動(dòng)畫(huà)-創(chuàng)新互聯(lián)

這篇文章主要介紹“怎么用html5與css3完成google涂鴉動(dòng)畫(huà)”，在日常操作中，相信很多人在怎么用html5與css3完成google涂鴉動(dòng)畫(huà)問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”怎么用html5與css3完成google涂鴉動(dòng)畫(huà)”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

龍華網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、響應(yīng)式網(wǎng)站開(kāi)發(fā)等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。成都創(chuàng)新互聯(lián)公司從2013年成立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。

今天我們將介紹，如何使用css3完成google涂鴉動(dòng)畫(huà)。當(dāng)你點(diǎn)擊demo頁(yè)面的【開(kāi)始】按鈕之后，頁(yè)面中的騎手和馬匹將會(huì)運(yùn)動(dòng)起來(lái)，/tupian/20230522/
這里需要強(qiáng)調(diào)的一點(diǎn)是，ie不支持css3的動(dòng)畫(huà)屬性，再次抱怨下萬(wàn)惡的ie。但是我們不能以此為理由不去擁抱css3。
我們先來(lái)看html代碼。

代碼如下:

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/google-doodle-animation-in-css3-without-javascript.css"/>
</head>
<body>
<div id="logo">
<div class="frame">
<img src="img/muybridge12-hp-v.png"/>
</div>
<label for="play_button" id="play_label"></label>
<input type="checkbox" id="play_button" name="play_button"/>
<span id="play_image">
<img src="img/muybridge12-hp-p.jpg"/>
</span>
<div class="horse"></div>
<div class="horse"></div>
<div class="horse"></div>
</div>
</body>
</html>

下面是部分css。

代碼如下:

*{margin:0px;padding:0px;}
#logo{position: relative;}
.horse{
width:469px;
height:54px;
background: url('../img/muybridge12-hp-f.jpg');
}
.frame{position:absolute;left:0;top:0;z-index: 1;}
#play_button{display: none;}
#play_label{
width:67px;
height:54px;
display:block;
position: absolute;
left:201px;
top:54px;
z-index: 2;
}
#play_image{
position: absolute;
left:201px;
top:54px;
z-index: 0;
overflow: hidden;
width: 68px;
height: 55px;
}
#play_image img{
position: absolute;
left: 0;
top: 0;
}

這部分代碼沒(méi)太大難度，我就不做詳細(xì)講解了。css基礎(chǔ)不是很扎實(shí)的讀者，也許會(huì)疑惑【開(kāi)始】按鈕是如何實(shí)現(xiàn)定位的?？梢宰孕虚喿xposition屬性，了解absolute具體作用。
下面是上述html和css代碼完成的頁(yè)面效果。
pic
下面我們來(lái)介紹如何產(chǎn)生動(dòng)畫(huà)效果。我們首先需要定義關(guān)鍵幀，他規(guī)定動(dòng)畫(huà)在不同階段的效果。大家可以通過(guò)http://www.w3schools.com/css3/css3_animations.asp 了解更多信息。
我們創(chuàng)建了一個(gè)名為horse-ride的關(guān)鍵幀，針對(duì)chrome和firefox需要在前面添加-webkit-或者是-moz-前綴。0%和100%分別代碼開(kāi)始和結(jié)束，可以根據(jù)需要增加新的case，比如50%時(shí)的動(dòng)畫(huà)效果。

代碼如下:

@-webkit-keyframes horse-ride {
% {background-position: 0 0;}
% {background-position: -804px 0;}
}
@-moz-keyframes horse-ride {
% {background-position: 0 0;}
% {background-position: -804px 0;}
}

下面，我們來(lái)為horse添加css3的動(dòng)畫(huà)效果。

代碼如下:

#play_button:checked ~.horse{
-webkit-animation:horse-ride 0.5s steps(12,end) infinite;
-webkit-animation-delay:2.5s;
-moz-animation:horse-ride 0.5s steps(12,end) infinite;
-moz-animation-delay:2.5s;
background-position: -2412px 0;
-webkit-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
-moz-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
}

這里首先介紹:checked和~，:checked是偽類，指當(dāng)#play_button選中時(shí)的css效果，~指的是#play_button的兄弟節(jié)點(diǎn)。
接下來(lái)介紹.horse相關(guān)的css屬性。animation中我們使用了4個(gè)值，依次代表：關(guān)鍵幀（我們上面定義的horse-ride），動(dòng)畫(huà)間隔時(shí)間，動(dòng)畫(huà)效果和執(zhí)行次數(shù)。之后我們又通過(guò)animation-delay設(shè)置動(dòng)畫(huà)延遲時(shí)間。通過(guò)transition和background-position集合起來(lái)，設(shè)置背景的過(guò)渡動(dòng)畫(huà)。
最后我們?yōu)椤鹃_(kāi)始】按鈕添加動(dòng)畫(huà)效果。

代碼如下:

#play_button:checked ~#play_image img{
left:-68px;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
}

大家可以自己動(dòng)手嘗試開(kāi)發(fā)了。
demo下載地址：google-doodle-animation-in-css3-without-javascript.zip今天我們將介紹，如何使用css3完成google涂鴉動(dòng)畫(huà)。當(dāng)你點(diǎn)擊demo頁(yè)面的【開(kāi)始】按鈕之后，頁(yè)面中的騎手和馬匹將會(huì)運(yùn)動(dòng)起來(lái)，/tupian/20230522/google-doodle-animation-in-css3-without-javascript.html。
這里需要強(qiáng)調(diào)的一點(diǎn)是，ie不支持css3的動(dòng)畫(huà)屬性，再次抱怨下萬(wàn)惡的ie。但是我們不能以此為理由不去擁抱css3。
我們先來(lái)看html代碼。

代碼如下:

下面是部分css。

代碼如下:

這部分代碼沒(méi)太大難度，我就不做詳細(xì)講解了。css基礎(chǔ)不是很扎實(shí)的讀者，也許會(huì)疑惑【開(kāi)始】按鈕是如何實(shí)現(xiàn)定位的。可以自行閱讀position屬性，了解absolute具體作用。
下面是上述html和css代碼完成的頁(yè)面效果。
pic
下面我們來(lái)介紹如何產(chǎn)生動(dòng)畫(huà)效果。我們首先需要定義關(guān)鍵幀，他規(guī)定動(dòng)畫(huà)在不同階段的效果。大家可以通過(guò)http://www.w3schools.com/css3/css3_animations.asp 了解更多信息。
我們創(chuàng)建了一個(gè)名為horse-ride的關(guān)鍵幀，針對(duì)chrome和firefox需要在前面添加-webkit-或者是-moz-前綴。0%和100%分別代碼開(kāi)始和結(jié)束，可以根據(jù)需要增加新的case，比如50%時(shí)的動(dòng)畫(huà)效果。

代碼如下:

@-webkit-keyframes horse-ride {
% {background-position: 0 0;}
% {background-position: -804px 0;}
}
@-moz-keyframes horse-ride {
% {background-position: 0 0;}
% {background-position: -804px 0;}
}

下面，我們來(lái)為horse添加css3的動(dòng)畫(huà)效果。

代碼如下:

#play_button:checked ~#play_image img{
left:-68px;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
}

到此，關(guān)于“怎么用html5與css3完成google涂鴉動(dòng)畫(huà)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

名稱欄目：怎么用html5與css3完成google涂鴉動(dòng)畫(huà)-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)路徑：http://jinyejixie.com/article21/decgcd.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、微信公眾號(hào)、動(dòng)態(tài)網(wǎng)站、靜態(tài)網(wǎng)站、搜索引擎優(yōu)化、網(wǎng)站維護(hù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

怎么用html5與css3完成google涂鴉動(dòng)畫(huà)-創(chuàng)新互聯(lián)