如何使用html5與css3完成google涂鴉動(dòng)畫(huà)_HTML5教程
推薦：HTML5中實(shí)現(xiàn)拖放效果無(wú)須借助javascript不使用javascript實(shí)現(xiàn)拖放效果,一直以來(lái)都是網(wǎng)友們所希望看到的,二今天html5卻做到了接下來(lái)詳細(xì)為您介紹，需要了解的朋友可以參考下
今天我們將介紹，如何使用css3完成google涂鴉動(dòng)畫(huà)。當(dāng)你點(diǎn)擊demo頁(yè)面的【開(kāi)始】按鈕之后，頁(yè)面中的騎手和馬匹將會(huì)運(yùn)動(dòng)起來(lái)，http://demo.mb5u.com/js/2012/googleCSS3/">css3/這里需要強(qiáng)調(diào)的一點(diǎn)是，ie不支持css3的動(dòng)畫(huà)屬性，再次抱怨下萬(wàn)惡的ie。但是我們不能以此為理由不去擁抱css3。
我們先來(lái)看html代碼。
復(fù)制代碼 代碼如下:m.hl5o.cn
<!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。
復(fù)制代碼 代碼如下:m.hl5o.cn
*{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à)效果。
復(fù)制代碼 代碼如下:m.hl5o.cn
@-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à)效果。
復(fù)制代碼 代碼如下:m.hl5o.cn
#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是偽類(lèi)，指當(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à)效果。
復(fù)制代碼 代碼如下:m.hl5o.cn
#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)，http://www.mycookingroom.com/demo/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代碼。
復(fù)制代碼 代碼如下:m.hl5o.cn
<!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。
復(fù)制代碼 代碼如下:m.hl5o.cn
*{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à)效果。
復(fù)制代碼 代碼如下:m.hl5o.cn
@-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à)效果。
復(fù)制代碼 代碼如下:m.hl5o.cn
#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是偽類(lèi)，指當(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à)效果。
復(fù)制代碼 代碼如下:m.hl5o.cn
#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下載地址：http://xiazai.mb5u.com/201212/yuanma/googlecss3_jb51.rar
分享：HTML5重塑Web世界它將如何改變互聯(lián)網(wǎng)即將成為新標(biāo)準(zhǔn)的HTML5到底會(huì)把我們帶向哪里？下面收集了開(kāi)發(fā)者、程序員以及設(shè)計(jì)師的一些看法，從中可以了解到HTML5如何改變互聯(lián)網(wǎng),需要的朋友可以了解下
相關(guān)HTML5教程：
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網(wǎng)易微博Web App用HTML5開(kāi)發(fā)的過(guò)程介紹
- HTML5 對(duì)各個(gè)標(biāo)簽的定義與規(guī)定：body的介紹
- 關(guān)于HTML5的安全問(wèn)題開(kāi)發(fā)人員需要牢記的
- 關(guān)于HTML5的22個(gè)初級(jí)技巧(圖文教程)
- 開(kāi)發(fā)人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數(shù)據(jù)庫(kù)的SQL語(yǔ)句的使用方法
- HTML5實(shí)踐-圖片設(shè)置成灰度圖
- HTML5安全介紹之內(nèi)容安全策略（CSP）簡(jiǎn)介
- HTML5 Web存儲(chǔ)方式的localStorage和sessionStorage進(jìn)行數(shù)據(jù)本地存儲(chǔ)案例應(yīng)用
- Bootstrap 學(xué)習(xí)分享
- input元素的url類(lèi)型和email類(lèi)型簡(jiǎn)介
HTML5教程Rss訂閱Div+Css教程搜索
HTML5教程推薦
- HTML5中實(shí)現(xiàn)拖放效果無(wú)須借助javascript
- html5指南-2.如何操作document metadata
- HTML5 實(shí)現(xiàn)一個(gè)訪問(wèn)本地文件的實(shí)例
- html5 Canvas畫(huà)圖教程(6)—canvas里畫(huà)曲線之a(chǎn)rcTo方法
- html5 拖拽上傳圖片實(shí)例演示
- html5 Canvas畫(huà)圖教程(2)—畫(huà)直線與設(shè)置線條的樣式如顏色/端點(diǎn)/交匯點(diǎn)
- 檢測(cè)瀏覽器是否支持html5視頻的代碼
- HTML5之WebGL 3D概述(下)—借助類(lèi)庫(kù)開(kāi)發(fā)及框架介紹
- HTML5之SVG 2D入門(mén)13—svg對(duì)決canvas及長(zhǎng)處和適用場(chǎng)景分析
- 網(wǎng)易微博Web App用HTML5開(kāi)發(fā)的過(guò)程介紹
- 相關(guān)鏈接：
- 教程說(shuō)明：
HTML5教程-如何使用html5與css3完成google涂鴉動(dòng)畫(huà)
。