如何使用html5與css3完成google涂鴉動(dòng)畫
發(fā)布時(shí)間：2012-12-16 10:13:01 作者：佚名 
我要評(píng)論
我要評(píng)論今天我們將介紹，如何使用css3完成google涂鴉動(dòng)畫。當(dāng)你點(diǎn)擊demo頁面的【開始】按鈕之后，頁面中的騎手和馬匹將會(huì)運(yùn)動(dòng)起來,需要的朋友可以了解下
今天我們將介紹，如何使用css3完成google涂鴉動(dòng)畫。當(dāng)你點(diǎn)擊demo頁面的【開始】按鈕之后，頁面中的騎手和馬匹將會(huì)運(yùn)動(dòng)起來，http://demo.jb51.net/js/2012/googlecss3/
這里需要強(qiáng)調(diào)的一點(diǎn)是，ie不支持css3的動(dòng)畫屬性，再次抱怨下萬惡的ie。但是我們不能以此為理由不去擁抱css3。
我們先來看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;
}
這部分代碼沒太大難度，我就不做詳細(xì)講解了。css基礎(chǔ)不是很扎實(shí)的讀者，也許會(huì)疑惑【開始】按鈕是如何實(shí)現(xiàn)定位的。可以自行閱讀position屬性，了解absolute具體作用。
下面是上述html和css代碼完成的頁面效果。
pic
下面我們來介紹如何產(chǎn)生動(dòng)畫效果。我們首先需要定義關(guān)鍵幀，他規(guī)定動(dòng)畫在不同階段的效果。大家可以通過http://www.w3schools.com/css3/css3_animations.asp 了解更多信息。
我們創(chuàng)建了一個(gè)名為horse-ride的關(guān)鍵幀，針對(duì)chrome和firefox需要在前面添加-webkit-或者是-moz-前綴。0%和100%分別代碼開始和結(jié)束，可以根據(jù)需要增加新的case，比如50%時(shí)的動(dòng)畫效果。
@-webkit-keyframes horse-ride {
% {background-position: 0 0;}
% {background-position: -804px 0;}
}
@-moz-keyframes horse-ride {
% {background-position: 0 0;}
% {background-position: -804px 0;}
}
下面，我們來為horse添加css3的動(dòng)畫效果。
#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)。
接下來介紹.horse相關(guān)的css屬性。animation中我們使用了4個(gè)值，依次代表：關(guān)鍵幀（我們上面定義的horse-ride），動(dòng)畫間隔時(shí)間，動(dòng)畫效果和執(zhí)行次數(shù)。之后我們又通過animation-delay設(shè)置動(dòng)畫延遲時(shí)間。通過transition和background-position集合起來，設(shè)置背景的過渡動(dòng)畫。
最后我們?yōu)椤鹃_始】按鈕添加動(dòng)畫效果。
#play_button:checked ~#play_image img{
left:-68px;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
}
大家可以自己動(dòng)手嘗試開發(fā)了。
demo下載地址：google-doodle-animation-in-css3-without-javascript.zip今天我們將介紹，如何使用css3完成google涂鴉動(dòng)畫。當(dāng)你點(diǎn)擊demo頁面的【開始】按鈕之后，頁面中的騎手和馬匹將會(huì)運(yùn)動(dòng)起來，http://www.mycookingroom.com/demo/google-doodle-animation-in-css3-without-javascript.html。
這里需要強(qiáng)調(diào)的一點(diǎn)是，ie不支持css3的動(dòng)畫屬性，再次抱怨下萬惡的ie。但是我們不能以此為理由不去擁抱css3。
我們先來看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;
}
這部分代碼沒太大難度，我就不做詳細(xì)講解了。css基礎(chǔ)不是很扎實(shí)的讀者，也許會(huì)疑惑【開始】按鈕是如何實(shí)現(xiàn)定位的?？梢宰孕虚喿xposition屬性，了解absolute具體作用。
下面是上述html和css代碼完成的頁面效果。
pic
下面我們來介紹如何產(chǎn)生動(dòng)畫效果。我們首先需要定義關(guān)鍵幀，他規(guī)定動(dòng)畫在不同階段的效果。大家可以通過http://www.w3schools.com/css3/css3_animations.asp 了解更多信息。
我們創(chuàng)建了一個(gè)名為horse-ride的關(guān)鍵幀，針對(duì)chrome和firefox需要在前面添加-webkit-或者是-moz-前綴。0%和100%分別代碼開始和結(jié)束，可以根據(jù)需要增加新的case，比如50%時(shí)的動(dòng)畫效果。
@-webkit-keyframes horse-ride {
% {background-position: 0 0;}
% {background-position: -804px 0;}
}
@-moz-keyframes horse-ride {
% {background-position: 0 0;}
% {background-position: -804px 0;}
}
下面，我們來為horse添加css3的動(dòng)畫效果。
#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)。
接下來介紹.horse相關(guān)的css屬性。animation中我們使用了4個(gè)值，依次代表：關(guān)鍵幀（我們上面定義的horse-ride），動(dòng)畫間隔時(shí)間，動(dòng)畫效果和執(zhí)行次數(shù)。之后我們又通過animation-delay設(shè)置動(dòng)畫延遲時(shí)間。通過transition和background-position集合起來，設(shè)置背景的過渡動(dòng)畫。
最后我們?yōu)椤鹃_始】按鈕添加動(dòng)畫效果。
#play_button:checked ~#play_image img{
left:-68px;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
}
大家可以自己動(dòng)手嘗試開發(fā)了。
demo下載地址：http://xiazai.jb51.net/201212/yuanma/googlecss3_jb51.rar
這里需要強(qiáng)調(diào)的一點(diǎn)是，ie不支持css3的動(dòng)畫屬性，再次抱怨下萬惡的ie。但是我們不能以此為理由不去擁抱css3。
我們先來看html代碼。
復(fù)制代碼
代碼如下:<!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ù)制代碼
代碼如下:*{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;
}
這部分代碼沒太大難度，我就不做詳細(xì)講解了。css基礎(chǔ)不是很扎實(shí)的讀者，也許會(huì)疑惑【開始】按鈕是如何實(shí)現(xiàn)定位的。可以自行閱讀position屬性，了解absolute具體作用。
下面是上述html和css代碼完成的頁面效果。
pic
下面我們來介紹如何產(chǎn)生動(dòng)畫效果。我們首先需要定義關(guān)鍵幀，他規(guī)定動(dòng)畫在不同階段的效果。大家可以通過http://www.w3schools.com/css3/css3_animations.asp 了解更多信息。
我們創(chuàng)建了一個(gè)名為horse-ride的關(guān)鍵幀，針對(duì)chrome和firefox需要在前面添加-webkit-或者是-moz-前綴。0%和100%分別代碼開始和結(jié)束，可以根據(jù)需要增加新的case，比如50%時(shí)的動(dòng)畫效果。
復(fù)制代碼
代碼如下:@-webkit-keyframes horse-ride {
% {background-position: 0 0;}
% {background-position: -804px 0;}
}
@-moz-keyframes horse-ride {
% {background-position: 0 0;}
% {background-position: -804px 0;}
}
下面，我們來為horse添加css3的動(dòng)畫效果。
復(fù)制代碼
代碼如下:#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)。
接下來介紹.horse相關(guān)的css屬性。animation中我們使用了4個(gè)值，依次代表：關(guān)鍵幀（我們上面定義的horse-ride），動(dòng)畫間隔時(shí)間，動(dòng)畫效果和執(zhí)行次數(shù)。之后我們又通過animation-delay設(shè)置動(dòng)畫延遲時(shí)間。通過transition和background-position集合起來，設(shè)置背景的過渡動(dòng)畫。
最后我們?yōu)椤鹃_始】按鈕添加動(dòng)畫效果。
復(fù)制代碼
代碼如下:#play_button:checked ~#play_image img{
left:-68px;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
}
大家可以自己動(dòng)手嘗試開發(fā)了。
demo下載地址：google-doodle-animation-in-css3-without-javascript.zip今天我們將介紹，如何使用css3完成google涂鴉動(dòng)畫。當(dāng)你點(diǎn)擊demo頁面的【開始】按鈕之后，頁面中的騎手和馬匹將會(huì)運(yùn)動(dòng)起來，http://www.mycookingroom.com/demo/google-doodle-animation-in-css3-without-javascript.html。
這里需要強(qiáng)調(diào)的一點(diǎn)是，ie不支持css3的動(dòng)畫屬性，再次抱怨下萬惡的ie。但是我們不能以此為理由不去擁抱css3。
我們先來看html代碼。
復(fù)制代碼
代碼如下:<!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ù)制代碼
代碼如下:*{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;
}
這部分代碼沒太大難度，我就不做詳細(xì)講解了。css基礎(chǔ)不是很扎實(shí)的讀者，也許會(huì)疑惑【開始】按鈕是如何實(shí)現(xiàn)定位的?？梢宰孕虚喿xposition屬性，了解absolute具體作用。
下面是上述html和css代碼完成的頁面效果。
pic
下面我們來介紹如何產(chǎn)生動(dòng)畫效果。我們首先需要定義關(guān)鍵幀，他規(guī)定動(dòng)畫在不同階段的效果。大家可以通過http://www.w3schools.com/css3/css3_animations.asp 了解更多信息。
我們創(chuàng)建了一個(gè)名為horse-ride的關(guān)鍵幀，針對(duì)chrome和firefox需要在前面添加-webkit-或者是-moz-前綴。0%和100%分別代碼開始和結(jié)束，可以根據(jù)需要增加新的case，比如50%時(shí)的動(dòng)畫效果。
復(fù)制代碼
代碼如下:@-webkit-keyframes horse-ride {
% {background-position: 0 0;}
% {background-position: -804px 0;}
}
@-moz-keyframes horse-ride {
% {background-position: 0 0;}
% {background-position: -804px 0;}
}
下面，我們來為horse添加css3的動(dòng)畫效果。
復(fù)制代碼
代碼如下:#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)。
接下來介紹.horse相關(guān)的css屬性。animation中我們使用了4個(gè)值，依次代表：關(guān)鍵幀（我們上面定義的horse-ride），動(dòng)畫間隔時(shí)間，動(dòng)畫效果和執(zhí)行次數(shù)。之后我們又通過animation-delay設(shè)置動(dòng)畫延遲時(shí)間。通過transition和background-position集合起來，設(shè)置背景的過渡動(dòng)畫。
最后我們?yōu)椤鹃_始】按鈕添加動(dòng)畫效果。
復(fù)制代碼
代碼如下:#play_button:checked ~#play_image img{
left:-68px;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
}
大家可以自己動(dòng)手嘗試開發(fā)了。
demo下載地址：http://xiazai.jb51.net/201212/yuanma/googlecss3_jb51.rar
相關(guān)文章
jQuery/CSS3實(shí)現(xiàn)的可折疊側(cè)邊欄菜單特效源碼
這是一款非常優(yōu)秀的jQuery菜單插件源碼，這款菜單插件是可折疊的側(cè)邊欄菜單，其菜單特點(diǎn)是點(diǎn)擊按鈕可以實(shí)現(xiàn)展開和折疊菜單，并伴隨動(dòng)畫效果。而且每一個(gè)菜單項(xiàng)都有一個(gè)小圖2014-09-01
橢圓形CSS3動(dòng)畫按鈕，Animated Buttons源碼，Animated Buttons動(dòng)態(tài)按鈕源碼下載，響應(yīng)鼠標(biāo)動(dòng)作，鼠標(biāo)放上的時(shí)候，按鈕前端出現(xiàn)動(dòng)畫效果，一個(gè)小箭頭不停的向下變化，感謝大2012-10-03
CSS3制作了一個(gè)動(dòng)畫導(dǎo)航效果(鼠標(biāo)懸浮會(huì)放大)
使用了CSS3的animation、transform、transition制作了一個(gè)動(dòng)畫導(dǎo)航效果，其中利用了Ligature Icon UI制作了導(dǎo)航中的ICON圖標(biāo),需要了解的朋友可以參考下2012-12-27
css3 loading css3技術(shù)實(shí)現(xiàn)5款不同風(fēng)格的網(wǎng)頁loading加載動(dòng)畫案例
CSS3技術(shù)實(shí)現(xiàn)5款不同風(fēng)格的網(wǎng)頁Loading動(dòng)畫，點(diǎn)擊每一個(gè)Demo，都有不同的Loading效果，一個(gè)完美的CSS3動(dòng)畫實(shí)例2013-01-18
CSS3 制作綻放的蓮花采用效果疊加實(shí)現(xiàn)
這效果看起來挺炫，反正我很喜歡，大家不妨看看，或許對(duì)你學(xué)習(xí)css3有所幫助，但原理并不復(fù)雜，能實(shí)現(xiàn)一片花瓣動(dòng)起來，就能實(shí)現(xiàn)9片花瓣。效果的疊加而已，感興趣的朋友可以
2013-01-31 CSS3 實(shí)現(xiàn)側(cè)邊欄展開收起動(dòng)畫
這篇文章主要介紹了如何使用CSS3 實(shí)現(xiàn)側(cè)邊欄展開收起動(dòng)畫，并附上了示例代碼，非常的詳細(xì)，推薦給需要的小伙伴。
2014-12-22