如何使用html5與css3完成google涂鴉動畫

2020-03-24 17:03:27

字體：大中小

來源：轉載

供稿：網友

今天我們將介紹，如何使用css3完成google涂鴉動畫。當你點擊demo頁面的【開始】按鈕之后，頁面中的騎手和馬匹將會運動起來，http://demo.phpstudy.net/js/2012/googlecss3/
這里需要強調的一點是，ie不支持css3的動畫屬性，再次抱怨下萬惡的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
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 /div
div /div
div /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;
}

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

復制代碼代碼如下:
@-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的動畫效果。

復制代碼代碼如下:
#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是偽類，指當#play_button選中時的css效果，~指的是#play_button的兄弟節點。
接下來介紹.horse相關的css屬性。animation中我們使用了4個值，依次代表：關鍵幀（我們上面定義的horse-ride），動畫間隔時間，動畫效果和執行次數。之后我們又通過animation-delay設置動畫延遲時間。通過transition和background-position集合起來，設置背景的過渡動畫。
最后我們為【開始】按鈕添加動畫效果。

復制代碼代碼如下:
#play_button:checked ~#play_image img{
left:-68px;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
}

大家可以自己動手嘗試開發了。
demo下載地址：google-doodle-animation-in-css3-without-javascript.zip今天我們將介紹，如何使用css3完成google涂鴉動畫。當你點擊demo頁面的【開始】按鈕之后，頁面中的騎手和馬匹將會運動起來，http://www.mycookingroom.com/demo/google-doodle-animation-in-css3-without-javascript.html。
這里需要強調的一點是，ie不支持css3的動畫屬性，再次抱怨下萬惡的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
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 /div
div /div
div /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;
}

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

復制代碼代碼如下:
@-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的動畫效果。

復制代碼代碼如下:
#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是偽類，指當#play_button選中時的css效果，~指的是#play_button的兄弟節點。
接下來介紹.horse相關的css屬性。animation中我們使用了4個值，依次代表：關鍵幀（我們上面定義的horse-ride），動畫間隔時間，動畫效果和執行次數。之后我們又通過animation-delay設置動畫延遲時間。通過transition和background-position集合起來，設置背景的過渡動畫。
最后我們為【開始】按鈕添加動畫效果。

復制代碼代碼如下:
#play_button:checked ~#play_image img{
left:-68px;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
}

大家可以自己動手嘗試開發了。
demo下載地址：http://xiazai.phpstudy.net/201212/yuanma/googlecss3_phpstudy.rarhtml教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：XHTML CSS寫出正規的BLOG

下一篇：整理優化你的CSS代碼