Hari ini kami akan memperkenalkan cara menggunakan CSS3 untuk menyelesaikan animasi Google Doodle. Saat Anda mengklik tombol [Mulai] pada halaman demo, pengendara dan kuda di halaman akan bergerak. http://demo.cuoxin.com/js/2012/googlecss3/">css3/
Satu hal yang harus ditekankan di sini adalah bahwa IE tidak mendukung atribut animasi CSS3, dan saya mengeluh tentang kejahatan IE lagi. Tapi kita tidak bisa menggunakan ini sebagai alasan untuk tidak merangkul CSS3.
Mari kita lihat kode HTML terlebih dahulu.
<! Doctype html>
<Html>
<head>
<title> </title>
<tautan 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 untuk = "play_button" id = "play_label"> </label>
<input type = "centang kotak" 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>
Di bawah ini adalah beberapa CSS.
*{margin: 0px; padding: 0px;}
#logo {position: relatif;}
.kuda{
Lebar: 469px;
Tinggi: 54px;
latar belakang: url ('../ img/muybridge12-hp-f.jpg');
}
.frame {position: absolute; kiri: 0; atas: 0; z-index: 1;}
#play_button {display: none;}
#play_label {
Lebar: 67px;
Tinggi: 54px;
Tampilan: Blok;
Posisi: Absolute;
Kiri: 201px;
Atas: 54px;
z-index: 2;
}
#play_image {
Posisi: Absolute;
Kiri: 201px;
Atas: 54px;
z-index: 0;
meluap: tersembunyi;
Lebar: 68px;
Tinggi: 55px;
}
#play_image img {
Posisi: Absolute;
Kiri: 0;
TOP: 0;
}
Bagian kode ini tidak terlalu sulit, jadi saya tidak akan menjelaskannya secara rinci. Pembaca yang tidak terlalu solid di CSS mungkin bertanya -tanya bagaimana tombol [Start] diposisikan. Anda dapat membaca atribut posisi sendiri untuk memahami fungsi spesifik absolut.
Di bawah ini adalah efek halaman yang diselesaikan oleh kode HTML dan CSS di atas.
foto
Mari kita perkenalkan cara menghasilkan efek animasi. Pertama -tama kita perlu mendefinisikan Keyframe, yang menentukan efek animasi pada tahap yang berbeda. Anda dapat mempelajari lebih lanjut di http://www.w3schools.com/css3/css3_animations.asp.
Kami membuat bingkai kunci yang disebut menunggang kuda, dan kami perlu awalan -webkit- atau -moz- untuk Chrome dan Firefox. 0% dan 100% mulai dan mengakhiri kode masing -masing. Anda dapat menambahkan kasus baru sesuai kebutuhan, seperti efek animasi sebesar 50%.
@-webkit-keyframes menunggang kuda {
% {latar belakang posisi: 0 0;}
% {latar belakang posisi: -804px 0;}
}
@-moz-keyframes menunggang kuda {
% {latar belakang posisi: 0 0;}
% {latar belakang posisi: -804px 0;}
}
Selanjutnya, kami akan menambahkan efek animasi CSS3 untuk kuda.
#play_button: diperiksa ~ .horse {
-webkit-animasi: langkah-langkah berkendara kuda (12, akhir) tak terbatas;
-webkit-animation-delay: 2.5s;
-Moz-animasi: Langkah-langkah Horse-Ride 0,5S (12, akhir) Infinite;
-Moz-animation-Delay: 2.5s;
Latar belakang posisi: -2412px 0;
-webkit-transisi: semua 2,5s kubik-cadel (0,550, 0,055, 0,675, 0,190);
-Moz-transisi: semua 2,5S kubik-menjadi (0,550, 0,055, 0,675, 0,190);
}
Di sini kami pertama kali memperkenalkan: diperiksa dan ~ ,: checked adalah kelas semu, mengacu pada efek CSS ketika #play_button dipilih, dan ~ mengacu pada node saudara #play_button.
Selanjutnya, kami memperkenalkan atribut CSS yang terkait dengan .horse. Dalam animasi, kami menggunakan 4 nilai, mewakili: Keyframe (kuda-kuda yang kami tentukan di atas), waktu interval animasi, efek animasi dan waktu eksekusi. Kemudian kami mengatur waktu tunda animasi melalui animasi-penunda. Atur animasi transisi latar belakang dengan menggabungkan transisi dan posisi latar belakang.
Akhirnya, kami menambahkan efek animasi ke tombol [Start].
#play_button: checked ~#play_image img {
Kiri: -68px;
-webkit-transisi: semua kemudahan 0,5-an;
-Moz-transisi: semua kemudahan 0,5-an;
}
Anda dapat mencoba mengembangkannya sendiri.
Alamat unduhan demo: Google-doodle-animation-in-css3-without-javascript.zip hari ini kita akan memperkenalkan cara menggunakan CSS3 untuk menyelesaikan animasi Google Doodle. Saat Anda mengklik tombol [Start] pada halaman demo, para pengendara dan kuda di halaman akan bergerak, http://www.mycookingroom.com/demo/google-doodle-animation-in-css3-without-javascript.html.
Satu hal yang harus ditekankan di sini adalah bahwa IE tidak mendukung atribut animasi CSS3, dan saya mengeluh tentang kejahatan IE lagi. Tapi kita tidak bisa menggunakan ini sebagai alasan untuk tidak merangkul CSS3.
Mari kita lihat kode HTML terlebih dahulu.
<! Doctype html>
<Html>
<head>
<title> </title>
<tautan 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 untuk = "play_button" id = "play_label"> </label>
<input type = "centang kotak" 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>
Di bawah ini adalah beberapa CSS.
*{margin: 0px; padding: 0px;}
#logo {position: relatif;}
.kuda{
Lebar: 469px;
Tinggi: 54px;
latar belakang: url ('../ img/muybridge12-hp-f.jpg');
}
.frame {position: absolute; kiri: 0; atas: 0; z-index: 1;}
#play_button {display: none;}
#play_label {
Lebar: 67px;
Tinggi: 54px;
Tampilan: Blok;
Posisi: Absolute;
Kiri: 201px;
Atas: 54px;
z-index: 2;
}
#play_image {
Posisi: Absolute;
Kiri: 201px;
Atas: 54px;
z-index: 0;
meluap: tersembunyi;
Lebar: 68px;
Tinggi: 55px;
}
#play_image img {
Posisi: Absolute;
Kiri: 0;
TOP: 0;
}
Bagian kode ini tidak terlalu sulit, jadi saya tidak akan menjelaskannya secara rinci. Pembaca yang tidak terlalu solid di CSS mungkin bertanya -tanya bagaimana tombol [Start] diposisikan. Anda dapat membaca atribut posisi sendiri untuk memahami fungsi spesifik absolut.
Di bawah ini adalah efek halaman yang diselesaikan oleh kode HTML dan CSS di atas.
foto
Mari kita perkenalkan cara menghasilkan efek animasi. Pertama -tama kita perlu mendefinisikan Keyframe, yang menentukan efek animasi pada tahap yang berbeda. Anda dapat mempelajari lebih lanjut di http://www.w3schools.com/css3/css3_animations.asp.
Kami membuat bingkai kunci yang disebut menunggang kuda, dan kami perlu awalan -webkit- atau -moz- untuk Chrome dan Firefox. 0% dan 100% mulai dan mengakhiri kode masing -masing. Anda dapat menambahkan kasus baru sesuai kebutuhan, seperti efek animasi sebesar 50%.
@-webkit-keyframes menunggang kuda {
% {latar belakang posisi: 0 0;}
% {latar belakang posisi: -804px 0;}
}
@-moz-keyframes menunggang kuda {
% {latar belakang posisi: 0 0;}
% {latar belakang posisi: -804px 0;}
}
Selanjutnya, kami akan menambahkan efek animasi CSS3 untuk kuda.
#play_button: diperiksa ~ .horse {
-webkit-animasi: langkah-langkah berkendara kuda (12, akhir) tak terbatas;
-webkit-animation-delay: 2.5s;
-Moz-animasi: Langkah-langkah Horse-Ride 0,5S (12, akhir) Infinite;
-Moz-animation-Delay: 2.5s;
Latar belakang posisi: -2412px 0;
-webkit-transisi: semua 2,5s kubik-cadel (0,550, 0,055, 0,675, 0,190);
-Moz-transisi: semua 2,5S kubik-menjadi (0,550, 0,055, 0,675, 0,190);
}
Di sini kami pertama kali memperkenalkan: diperiksa dan ~ ,: checked adalah kelas semu, mengacu pada efek CSS ketika #play_button dipilih, dan ~ mengacu pada node saudara #play_button.
Selanjutnya, kami memperkenalkan atribut CSS yang terkait dengan .horse. Dalam animasi, kami menggunakan 4 nilai, mewakili: Keyframe (kuda-kuda yang kami tentukan di atas), waktu interval animasi, efek animasi dan waktu eksekusi. Kemudian kami mengatur waktu tunda animasi melalui animasi-penunda. Atur animasi transisi latar belakang dengan menggabungkan transisi dan posisi latar belakang.
Akhirnya, kami menambahkan efek animasi ke tombol [Start].
#play_button: checked ~#play_image img {
Kiri: -68px;
-webkit-transisi: semua kemudahan 0,5-an;
-Moz-transisi: semua kemudahan 0,5-an;
}
Anda dapat mencoba mengembangkannya sendiri.
Alamat unduhan demo: http://xiazai.cuoxin.com/201212/yuanma/googlecss3_jb51.rar