Rumah > Artikel > hujung hadapan web > Cara menggunakan html5 dan css3 untuk melengkapkan animasi grafiti google
Cara menggunakan html5 dan css3 untuk melengkapkan animasi grafiti google
- PHP中文网asal
- 2017-03-16 13:17:421832semak imbas
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>
Berikut ialah sebahagian daripada 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;
}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;}
}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);
}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;
}
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