Cara menggunakan html5 dan css3 untuk melengkapkan animasi grafiti google-Tutorial H5-php.cn

Cara menggunakan html5 dan css3 untuk melengkapkan animasi grafiti google

PHP中文网

Lepaskan： 2017-03-16 13:17:42

asal

1902 orang telah melayarinya

Hari ini kami akan memperkenalkan cara menggunakan css3 untuk melengkapkan animasi doodle google. Apabila anda mengklik butang [Mula] pada halaman demo, penunggang dan kuda pada halaman akan bergerak
Satu perkara yang perlu ditekankan di sini ialah IE tidak menyokong atribut animasi CSS3, dan saya mengeluh tentang jahat IE lagi. Tetapi kita tidak boleh menggunakan ini sebagai alasan untuk tidak menerima css3.
Mari kita lihat kod html dahulu.

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<link rel="stylesheet" type="text/css" 
href="css/google-doodle-animation-in-css3-without-javascript.css"/> 
</head> 
<body> 
<p id="logo"> 
<p 
class="frame"> 
<img src="img/muybridge12-hp-v.png"/> 
</p> 
<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> 
<p 
class="horse"></p> 
<p class="horse"></p> 
<p class="horse"></p> 
</p> 
</body> 
</html>

Salin selepas log masuk

Berikut ialah sebahagian daripada css.

*{margin:0px;padding:0px;} 
#logo{position: relative;} 
.horse{ 
width:469px; 
height:54px; 
background: 
url(&#39;../img/muybridge12-hp-f.jpg&#39;); 
} 
.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; 
}

Salin selepas log masuk

Bahagian kod ini tidak terlalu sukar, jadi saya tidak akan menerangkannya secara terperinci. Pembaca yang tidak mempunyai asas yang sangat kukuh dalam CSS mungkin tertanya-tanya bagaimana butang [Mula] diletakkan. Anda boleh membaca atribut kedudukan sendiri untuk memahami peranan khusus mutlak.
Berikut ialah kesan halaman yang dilengkapkan oleh kod html dan css di atas.
Mari perkenalkan cara mencipta kesan animasi. Mula-mula kita perlu menentukan bingkai utama, yang menentukan kesan animasi pada peringkat yang berbeza.
Kami mencipta kerangka utama yang dipanggil horse-ride Untuk chrome dan firefox, anda perlu menambah awalan -webkit- atau -moz- di hadapan. 0% dan 100% ialah permulaan dan penghujung kod masing-masing. Kes baharu boleh ditambah mengikut keperluan, seperti kesan animasi pada 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;} 
}

Salin selepas log masuk

Seterusnya, mari tambahkan kesan animasi css3 pada kuda.

#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); 
}

Salin selepas log masuk

Di sini kami mula-mula memperkenalkan :checked dan ~, :checked ialah kelas pseudo, yang merujuk kepada kesan css apabila #play_button dipilih dan ~ merujuk kepada nod adik beradik #play_button.
Seterusnya, kami akan memperkenalkan atribut css yang berkaitan dengan .horse. Kami menggunakan 4 nilai dalam animasi, yang mewakili: kerangka utama (menunggang kuda yang kami takrifkan di atas), selang animasi, kesan animasi dan nombor pelaksanaan. Kemudian kami menetapkan masa kelewatan animasi melalui kelewatan animasi. Tetapkan animasi peralihan latar belakang dengan menggabungkan peralihan dan kedudukan latar belakang.
Akhir sekali, kami menambah kesan animasi pada butang [Mula].

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

Salin selepas log masuk

Anda boleh cuba membangunkannya sendiri.

Artikel berkaitan:

6 kesan butang grafiti lukisan tangan berdasarkan CSS3 tulen

Boleh laras berdasarkan kanvas html5 javascript Papan grafiti dengan warna/ketebalan/pemadam berus

Pelaksanaan ringkas kod contoh papan grafiti HTML5