วันนี้เราจะแนะนำวิธีใช้ CSS3 เพื่อให้ Google Doodle Animation สมบูรณ์ เมื่อคุณคลิกปุ่ม [เริ่มต้น] บนหน้าสาธิตผู้ขับขี่และม้าในหน้าจะย้าย http://demo.cuoxin.com/js/2012/googlecss3/">css3/
สิ่งหนึ่งที่จะเน้นที่นี่คือ IE ไม่สนับสนุนคุณลักษณะแอนิเมชั่นของ CSS3 และฉันบ่นเกี่ยวกับความชั่วร้ายเช่นอีกครั้ง แต่เราไม่สามารถใช้สิ่งนี้เป็นเหตุผลที่จะไม่ยอมรับ 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 = "โลโก้">
<div>
<img src = "img/muybridge12-hp-v.png"/>>>>
</div>
<label for = "play_button" id = "play_label"> </label>
<อินพุต type = "ช่องทำเครื่องหมาย" 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 {ตำแหน่ง: ญาติ;}
.ม้า{
ความกว้าง: 469px;
ความสูง: 54px;
ความเป็นมา: url ('../ img/muybridge12-hp-f.jpg');
-
.Frame {ตำแหน่ง: Absolute; ซ้าย: 0; TOP: 0; Z-INDEX: 1;}
#play_button {display: none;}
#play_label {
ความกว้าง: 67px;
ความสูง: 54px;
แสดง: บล็อก;
ตำแหน่ง: สัมบูรณ์;
ซ้าย: 201px;
ด้านบน: 54px;
z-index: 2;
-
#play_image {
ตำแหน่ง: สัมบูรณ์;
ซ้าย: 201px;
ด้านบน: 54px;
z-index: 0;
ล้น: ซ่อน;
ความกว้าง: 68px;
ความสูง: 55px;
-
#play_image img {
ตำแหน่ง: สัมบูรณ์;
ซ้าย: 0;
ด้านบน: 0;
-
ส่วนหนึ่งของรหัสนี้ไม่ยากเกินไปดังนั้นฉันจะไม่อธิบายอย่างละเอียด ผู้อ่านที่ไม่มั่นคงใน CSS อาจสงสัยว่าปุ่ม [เริ่มต้น] อยู่ในตำแหน่งอย่างไร คุณสามารถอ่านแอตทริบิวต์ตำแหน่งด้วยตัวคุณเองเพื่อทำความเข้าใจฟังก์ชั่นเฉพาะของสัมบูรณ์
ด้านล่างนี้เป็นเอฟเฟกต์หน้าเสร็จสิ้นโดยรหัส HTML และ CSS ข้างต้น
รูปถ่าย
มาแนะนำวิธีการผลิตเอฟเฟกต์ภาพเคลื่อนไหว ก่อนอื่นเราต้องกำหนด keyframe ซึ่งระบุเอฟเฟกต์ของภาพเคลื่อนไหวในขั้นตอนต่าง ๆ คุณสามารถเรียนรู้เพิ่มเติมได้ที่ http://www.w3schools.com/css3/css3_animations.asp
เราสร้างคีย์เฟรมที่เรียกว่าขี่ม้าและเราจำเป็นต้องนำหน้า -webkit- หรือ -moz- สำหรับ Chrome และ Firefox 0% และ 100% เริ่มต้นและสิ้นสุดรหัสตามลำดับ คุณสามารถเพิ่มกรณีใหม่ได้ตามต้องการเช่นเอฟเฟกต์ภาพเคลื่อนไหวที่ 50%
@-webkit-keyframes ม้าขี่ {
% {ตำแหน่งพื้นหลัง: 0 0;}
% {ตำแหน่งพื้นหลัง: -804px 0;}
-
@-moz-keyframes ม้าขี่ {
% {ตำแหน่งพื้นหลัง: 0 0;}
% {ตำแหน่งพื้นหลัง: -804px 0;}
-
ต่อไปเราจะเพิ่มเอฟเฟกต์แอนิเมชั่นของ CSS3 สำหรับม้า
#play_button: ตรวจสอบ ~ .horse {
-webkit-animation: ขี่ม้า 0.5S ขั้นตอน (12, สิ้นสุด) ไม่มีที่สิ้นสุด;
-webkit-animation-delay: 2.5s;
-moz-Animation: ขี่ม้า 0.5s ขั้นตอน (12, สิ้นสุด) ไม่มีที่สิ้นสุด;
-moz-animation-delay: 2.5s;
ตำแหน่งพื้นหลัง: -2412px 0;
-webkit-transition: 2.5S ลูกบาศก์เบส (0.550, 0.055, 0.675, 0.190);
-MOZ-TRANSITION: 2.5S ลูกบาศก์ล้วน (0.550, 0.055, 0.675, 0.190);
-
ที่นี่เราแนะนำครั้งแรก: ตรวจสอบและ ~,: ตรวจสอบเป็นคลาสหลอกหมายถึงเอฟเฟกต์ CSS เมื่อเลือก #play_button และ ~ หมายถึงโหนดพี่ชายของ #play_button
ต่อไปเราแนะนำคุณลักษณะ CSS ที่เกี่ยวข้องกับ. horse ในแอนิเมชั่นเราใช้ 4 ค่าซึ่งเป็นตัวแทน: Keyframe (ม้าขี่ม้าที่เรากำหนดไว้ข้างต้น), ช่วงเวลาของภาพเคลื่อนไหว, เอฟเฟกต์ภาพเคลื่อนไหวและเวลาดำเนินการ จากนั้นเราตั้งค่าเวลาการหน่วงของแอนิเมชั่นผ่านแอนิเมชั่นล่าช้า ตั้งค่าภาพเคลื่อนไหวการเปลี่ยนแปลงของพื้นหลังโดยการรวมการเปลี่ยนแปลงและตำแหน่งพื้นหลัง
ในที่สุดเราเพิ่มเอฟเฟกต์ภาพเคลื่อนไหวลงในปุ่ม [Start]
#play_button: ตรวจสอบ ~#play_image img {
ซ้าย: -68px;
-webkit-transition: ทั้งหมด 0.5S EASE-In;
-MOZ-TRANSITION: ทั้งหมด 0.5S EASE-In;
-
คุณสามารถพยายามพัฒนาด้วยตัวเอง
ที่อยู่ดาวน์โหลดตัวอย่าง: Google-Doodle-Animation-in-CSS3-without-javascript.zip วันนี้เราจะแนะนำวิธีใช้ CSS3 เพื่อกรอกภาพเคลื่อนไหวของ Google Doodle เมื่อคุณคลิกปุ่ม [เริ่มต้น] บนหน้าสาธิตนักปั่นและม้าในหน้าจะย้าย http://www.mycookingroom.com/demo/google-doodle-animation-in-cs3-without-javascript.html
สิ่งหนึ่งที่จะเน้นที่นี่คือ IE ไม่สนับสนุนคุณลักษณะแอนิเมชั่นของ CSS3 และฉันบ่นเกี่ยวกับความชั่วร้ายเช่นอีกครั้ง แต่เราไม่สามารถใช้สิ่งนี้เป็นเหตุผลที่จะไม่ยอมรับ 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 = "โลโก้">
<div>
<img src = "img/muybridge12-hp-v.png"/>>>>
</div>
<label for = "play_button" id = "play_label"> </label>
<อินพุต type = "ช่องทำเครื่องหมาย" 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 {ตำแหน่ง: ญาติ;}
.ม้า{
ความกว้าง: 469px;
ความสูง: 54px;
ความเป็นมา: url ('../ img/muybridge12-hp-f.jpg');
-
.Frame {ตำแหน่ง: Absolute; ซ้าย: 0; TOP: 0; Z-INDEX: 1;}
#play_button {display: none;}
#play_label {
ความกว้าง: 67px;
ความสูง: 54px;
แสดง: บล็อก;
ตำแหน่ง: สัมบูรณ์;
ซ้าย: 201px;
ด้านบน: 54px;
z-index: 2;
-
#play_image {
ตำแหน่ง: สัมบูรณ์;
ซ้าย: 201px;
ด้านบน: 54px;
z-index: 0;
ล้น: ซ่อน;
ความกว้าง: 68px;
ความสูง: 55px;
-
#play_image img {
ตำแหน่ง: สัมบูรณ์;
ซ้าย: 0;
ด้านบน: 0;
-
ส่วนหนึ่งของรหัสนี้ไม่ยากเกินไปดังนั้นฉันจะไม่อธิบายอย่างละเอียด ผู้อ่านที่ไม่มั่นคงใน CSS อาจสงสัยว่าปุ่ม [เริ่มต้น] อยู่ในตำแหน่งอย่างไร คุณสามารถอ่านแอตทริบิวต์ตำแหน่งด้วยตัวคุณเองเพื่อทำความเข้าใจฟังก์ชั่นเฉพาะของสัมบูรณ์
ด้านล่างนี้เป็นเอฟเฟกต์หน้าเสร็จสิ้นโดยรหัส HTML และ CSS ข้างต้น
รูปถ่าย
มาแนะนำวิธีการผลิตเอฟเฟกต์ภาพเคลื่อนไหว ก่อนอื่นเราต้องกำหนด keyframe ซึ่งระบุเอฟเฟกต์ของภาพเคลื่อนไหวในขั้นตอนต่าง ๆ คุณสามารถเรียนรู้เพิ่มเติมได้ที่ http://www.w3schools.com/css3/css3_animations.asp
เราสร้างคีย์เฟรมที่เรียกว่าขี่ม้าและเราจำเป็นต้องนำหน้า -webkit- หรือ -moz- สำหรับ Chrome และ Firefox 0% และ 100% เริ่มต้นและสิ้นสุดรหัสตามลำดับ คุณสามารถเพิ่มกรณีใหม่ได้ตามต้องการเช่นเอฟเฟกต์ภาพเคลื่อนไหวที่ 50%
@-webkit-keyframes ม้าขี่ {
% {ตำแหน่งพื้นหลัง: 0 0;}
% {ตำแหน่งพื้นหลัง: -804px 0;}
-
@-moz-keyframes ม้าขี่ {
% {ตำแหน่งพื้นหลัง: 0 0;}
% {ตำแหน่งพื้นหลัง: -804px 0;}
-
ต่อไปเราจะเพิ่มเอฟเฟกต์แอนิเมชั่นของ CSS3 สำหรับม้า
#play_button: ตรวจสอบ ~ .horse {
-webkit-animation: ขี่ม้า 0.5S ขั้นตอน (12, สิ้นสุด) ไม่มีที่สิ้นสุด;
-webkit-animation-delay: 2.5s;
-moz-Animation: ขี่ม้า 0.5s ขั้นตอน (12, สิ้นสุด) ไม่มีที่สิ้นสุด;
-moz-animation-delay: 2.5s;
ตำแหน่งพื้นหลัง: -2412px 0;
-webkit-transition: 2.5S ลูกบาศก์เบส (0.550, 0.055, 0.675, 0.190);
-MOZ-TRANSITION: 2.5S ลูกบาศก์ล้วน (0.550, 0.055, 0.675, 0.190);
-
ที่นี่เราแนะนำครั้งแรก: ตรวจสอบและ ~,: ตรวจสอบเป็นคลาสหลอกหมายถึงเอฟเฟกต์ CSS เมื่อเลือก #play_button และ ~ หมายถึงโหนดพี่ชายของ #play_button
ต่อไปเราแนะนำคุณลักษณะ CSS ที่เกี่ยวข้องกับ. horse ในแอนิเมชั่นเราใช้ 4 ค่าซึ่งเป็นตัวแทน: Keyframe (ม้าขี่ม้าที่เรากำหนดไว้ข้างต้น), ช่วงเวลาของภาพเคลื่อนไหว, เอฟเฟกต์ภาพเคลื่อนไหวและเวลาดำเนินการ จากนั้นเราตั้งค่าเวลาการหน่วงของแอนิเมชั่นผ่านแอนิเมชั่นล่าช้า ตั้งค่าภาพเคลื่อนไหวการเปลี่ยนแปลงของพื้นหลังโดยการรวมการเปลี่ยนแปลงและตำแหน่งพื้นหลัง
ในที่สุดเราเพิ่มเอฟเฟกต์ภาพเคลื่อนไหวลงในปุ่ม [Start]
#play_button: ตรวจสอบ ~#play_image img {
ซ้าย: -68px;
-webkit-transition: ทั้งหมด 0.5S EASE-In;
-MOZ-TRANSITION: ทั้งหมด 0.5S EASE-In;
-
คุณสามารถพยายามพัฒนาด้วยตัวเอง
ที่อยู่ดาวน์โหลดตัวอย่าง: http://xiazai.cuoxin.com/201212/yuanma/googlecsss3_jb51.rar