การสร้างแบนเนอร์อย่างง่ายด้วย CSS3 แบนเนอร์ภาพเคลื่อนไหวโดยใช้ CSS3 การนำทาง CSS3 พร้อมการเปลี่ยนภาพเคลื่อนไหว

เพื่อให้เข้าใจถึงโครงสร้างของมาร์กอัปของเรา เรามาเน้นที่เรือสักครู่:

>

>
>
>
ตอนนี้เรามาดูแบนเนอร์แรกในหน้าสาธิตกันดีกว่า มีแอนิเมชั่นสามแบบแยกกันที่เกิดขึ้นบนเรือ:
• แอนิเมชัน - เมื่อเรือเลื่อนไปทางด้านซ้าย สิ่งนี้ใช้โดยตรงกับรายการที่ไม่เรียงลำดับ (กลุ่มขององค์ประกอบเรือ)
• แอนิเมชัน - ซึ่งทำให้เรือมีเอฟเฟกต์โยก จำลองเรือที่ลอยอยู่ในน้ำ สิ่งนี้ใช้โดยตรงกับรายการ (เรือ)
• แอนิเมชั่น - ซึ่งซ่อนเครื่องหมายคำถาม สิ่งนี้ใช้กับ div (เครื่องหมายคำถาม)
หากคุณไม่มีอาการเมาเรือ ลองดูที่หน้าสาธิตอีกครั้ง คุณจะเห็นว่าภาพเคลื่อนไหวที่ใช้กับรายการ (เรือ) ทำให้เรือลอยขึ้นยังส่งผลต่อ DIV ที่อยู่ข้างในด้วย (พร้อมเครื่องหมายคำถาม) นอกจากนี้ แอนิเมชั่น "เลื่อนเข้า" ที่นำไปใช้กับรายการที่ไม่เรียงลำดับ (กลุ่ม) ยังส่งผลต่อองค์ประกอบรายการและ DIV ที่อยู่ภายในรายการ (เรือและเครื่องหมายคำถาม) สิ่งนี้นำเราไปสู่ข้อสังเกตที่สำคัญ:
องค์ประกอบลูกสืบทอดภาพเคลื่อนไหวจากผู้ปกครอง นอกเหนือจากภาพเคลื่อนไหวของตัวเองความรู้นี้ถูกเพิ่มเข้าไปในคลังแสงของเรา แต่จำนวนองค์ประกอบลูก/ผู้ปกครองเมื่อสร้างแอนิเมชั่นจะทำให้คุณทึ่ง (และโปรเซสเซอร์บนแล็ปท็อปของคุณยาย)!
ซีเอสเอส
ก่อนที่เราจะไปถึงสิ่งที่น่าสนใจจริงๆ และเริ่มสร้างแอนิเมชั่น เรายังต้องสร้างสไตล์สำหรับเบราว์เซอร์ที่ติดอยู่ในศตวรรษที่ 18 ก่อน
รูปแบบทางเลือกสำหรับเบราว์เซอร์รุ่นเก่า

เราจะสร้างสไตล์ทางเลือกราวกับว่าไม่มีภาพเคลื่อนไหว CSS อยู่ (ความคิดที่ว่าไม่มีภาพเคลื่อนไหว CSS จะทำให้ผู้ใหญ่ไม่เพียงแต่ร้องไห้เท่านั้น แต่ยังแขวนคอตายอยู่ข้างๆ ฉัน :)) กล่าวอีกนัยหนึ่ง หากแอนิเมชั่นของเราเล่นไม่ได้ แบนเนอร์ก็ควรจะยังดูดีอยู่ ด้วยวิธีนี้ เมื่อมีคนดูแบนเนอร์โดยใช้เบราว์เซอร์เก่า พวกเขาจะเห็นแบนเนอร์แบบคงที่ปกติแทนที่จะเป็นพื้นที่ว่าง
ตัวอย่างเช่น ถ้ามีคนใช้ CSS แบบนี้ จะเกิดปัญหา:
/* ผิดทาง! -

0% (ความทึบ: 0; )
100% (ความทึบ: 1; )
}
ดิวิชั่น (
ความทึบ: 0 ; /* บล็อกนี้ถูกซ่อนไว้โดยค่าเริ่มต้น!*/

}
หากเบราว์เซอร์ของผู้ใช้ไม่รองรับภาพเคลื่อนไหว ผู้ใช้จะมองไม่เห็นแบนเนอร์นั้น จากนั้นลูกค้าจะพังประตูห้องทำงานของผู้ขายโดยมีเลื่อยไฟฟ้าอยู่ในมือ และเรียกร้องให้พวกเขาอธิบายว่าทำไมพวกเขาถึงไม่ขายสินค้าของเขา! และหากพวกเขาไม่เข้าใจว่าเบราว์เซอร์นั้นช่างน่าสมเพช ชีวิตของพวกเขาก็จะจบลงอย่างน่าสยดสยอง และคำพูดสุดท้ายของพวกเขาก็จะเป็นการสาปแช่ง Internet Explorer... :)
แต่ไม่ต้องกังวล เราจะให้การสนับสนุนเบราว์เซอร์เพิ่มเติม:
/* วิธีที่ถูกต้อง */
@keyframe เฟดในแอนิเมชั่นของเรา (
0% (ความทึบ: 0; )
100% (ความทึบ: 1; )
}
ดิวิชั่น (
ความทึบ: 1 ; /* div นี้จะปรากฏให้เห็นตามค่าเริ่มต้น */
แอนิเมชั่น: our-fade-in-animation 1s 1 ;
}
อย่างที่คุณเห็น DIV จะแสดงแม้ว่าภาพเคลื่อนไหวจะเล่นไม่ได้ก็ตาม หากสามารถเล่นภาพเคลื่อนไหวได้ DIV จะถูกซ่อนทันทีและภาพเคลื่อนไหวจะเล่นจนจบ
ตอนนี้เรารู้วิธีทำให้แบนเนอร์แบบเคลื่อนไหวรองรับเบราว์เซอร์รุ่นเก่าแล้ว มาดู CSS พื้นฐานกันดีกว่า
มีสิ่งสำคัญสามประการที่ควรคำนึงถึง:
• เนื่องจากโฆษณาเหล่านี้อาจนำไปใช้บนเว็บไซต์ต่างๆ เราจะทำให้สไตล์ CSS ทั้งหมดของเรามีความเฉพาะเจาะจงมาก- เราจะเริ่มการประกาศตัวเลือกแต่ละรายการด้วยรหัส: #ad-1 วิธีนี้จะป้องกันไม่ให้สไตล์แบนเนอร์ของเราถูกรบกวนโดยสไตล์และองค์ประกอบที่มีอยู่
• เราจะมีจุดมุ่งหมาย ละเว้นฟังก์ชันการหน่วงเวลาของภาพเคลื่อนไหวเมื่อสร้างแอนิเมชั่นของเรา หากเราใช้คุณสมบัติการหน่วงเวลาของภาพเคลื่อนไหว รวมถึงการออกแบบองค์ประกอบของเราด้วยวิธีที่ถูกต้อง (มองเห็นได้โดยค่าเริ่มต้น) ทุกอย่างจะปรากฏบนหน้าจอก่อนที่แอนิเมชั่นจะเริ่มเล่นในที่สุด นี่คือเหตุผลว่าทำไมแอนิเมชั่นจึงเริ่มต้นทันที ทำให้เราสามารถซ่อนองค์ประกอบต่างๆ จากหน้าจอได้จนกว่าเราจะต้องการ เราจะจำลองความล่าช้าของภาพเคลื่อนไหวโดยการเพิ่มระยะเวลาและปรับคีย์เฟรมด้วยตนเอง คุณจะเห็นตัวอย่างนี้เมื่อเราเริ่มสร้างภาพเคลื่อนไหว
• ถ้าเป็นไปได้ ใช้ภาพเคลื่อนไหวเดียวสำหรับหลายองค์ประกอบ- วิธีนี้ช่วยให้เราประหยัดเวลาได้มากและลดการขยายตัวของโค้ด คุณสามารถสร้างเอฟเฟกต์ต่างๆ มากมายภายในภาพเคลื่อนไหวเดียวกันได้โดยการปรับระยะเวลาและการเปลี่ยนภาพ
ดังนั้นเราจะเริ่มสร้างแบนเนอร์โฆษณาของเรา ตรวจสอบให้แน่ใจว่ามีตำแหน่งสัมพัทธ์ (ตำแหน่ง: สัมพันธ์) เพื่อให้สามารถวางองค์ประกอบภายในได้อย่างถูกต้อง เรายังต้องตรวจสอบให้แน่ใจด้วยว่าคุณสมบัติ overflow: Hidden ถูกตั้งค่าให้ซ่อนสิ่งที่ไม่จำเป็น:
#โฆษณา-1 (
ความกว้าง: 720px;
ความสูง: 300px;
ลอย: ซ้าย;
ระยะขอบ: 40px อัตโนมัติ 0;
ภาพพื้นหลัง : url (../images/ad-1/พื้นหลัง.png ) ;
ตำแหน่งพื้นหลัง : กึ่งกลาง ;
พื้นหลังซ้ำ : ไม่ซ้ำ ;
ล้น: ซ่อนเร้น;
ตำแหน่ง: ญาติ;
กล่องเงา: 0px 0px 6px #000 ;
}
#ad-1 #เนื้อหา (
ความกว้าง: 325px;
ลอย: ขวา;
ระยะขอบ: 40px;
การจัดแนวข้อความ: กึ่งกลาง;
ดัชนี z: 4;
ตำแหน่ง: ญาติ;
ล้น: มองเห็นได้;
}
#โฆษณา-1 h2 (
ตระกูลฟอนต์ : "Alfa Slab One", ตัวเขียน ;
สี : #137dd5 ;
ขนาดตัวอักษร: 50px;
ความสูงของบรรทัด: 50px;

แอนิเมชั่น: ล่าช้า - จาง - แอนิเมชั่น 7s 1 ง่ายต่อการเข้า - ออก; /* H2 จะจางหายไปพร้อมกับการดีเลย์ของภาพเคลื่อนไหวจำลอง */
}
#ad-1 h3 (

สี : #202224 ;
ขนาดตัวอักษร: 31px;
ความสูงของบรรทัด: 31px;
ข้อความเงา : 0px 0px 4px #fff ;
แอนิเมชั่น: ดีเลย์ - เฟด - แอนิเมชั่น 10 วินาที 1 การค่อยๆ เข้า - ออก; /* H3 จะจางหายไปพร้อมกับการดีเลย์ของภาพเคลื่อนไหวจำลอง */
}
#ad-1 แบบฟอร์ม (
ระยะขอบ: 30px 0 0 6px;
ตำแหน่ง: ญาติ;
แอนิเมชัน: รูปแบบแอนิเมชั่น 12s 1 การค่อยๆ เข้า-ออก; /* รหัสนี้ย้ายแบบฟอร์มอีเมลของเรา */
}
#ad-1 #อีเมล (
ความกว้าง: 158px;
ส่วนสูง: 48px;
ลอย: ซ้าย;
ช่องว่างภายใน: 0 20px;
ขนาดตัวอักษร: 16px;
ตระกูลฟอนต์: "Lucida Grande", sans-serif;
สี : #fff ;
ข้อความเงา : 1px 1px 0px #a2917d ;
ขอบบนซ้ายรัศมี: 5px ;
เส้นขอบล่างซ้ายรัศมี: 5px ;
เส้นขอบ : 1px ทึบ #a2917d ;
โครงร่าง: ไม่มี;
กล่องเงา: -1px -1px 1px #fff ;
สีพื้นหลัง : #c7b29b ;
ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (ด้านล่าง, rgb (216, 201, 185) 0%, rgb (199, 178, 155) 100%);
}
#ad-1 #email :focus (
ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (ด้านล่าง, rgb (199, 178, 155) 0%, rgb (199, 178, 155) 100%);
}
#ad-1 #ส่ง (
ความสูง: 50px;
ลอย: ซ้าย;
เคอร์เซอร์: ตัวชี้;
ช่องว่างภายใน: 0 20px;
ขนาดตัวอักษร: 20px;
ตระกูลฟอนต์ : "Boogaloo" , ตัวเขียน ;
สี : #137dd5 ;
ข้อความเงา : 1px 1px 0px #fff ;
ขอบบนขวารัศมี: 5px ;
ขอบล่างขวารัศมี: 5px ;
เส้นขอบ : 1px ทึบ #bcc0c4 ;
เส้นขอบซ้าย : ไม่มี ;
สีพื้นหลัง : #fff ;
ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (ด้านล่าง, rgb (245, 247, 249) 0%, rgb (255, 255, 255) 100%);
}
#ad-1 #submit :โฮเวอร์ (
ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (ด้านล่าง, rgb (255, 255, 255) 0%, rgb (255, 255, 255) 100%);
}
ตอนนี้เราจะสร้างสไตล์สำหรับน้ำและเรียกแอนิเมชั่นที่เกี่ยวข้อง:
#ad-1 ul#น้ำ (
/* หากเราต้องการเพิ่มภาพเคลื่อนไหวให้กับน้ำ (เช่น เคลื่อนที่ในแนวนอน) เราก็สามารถทำได้ที่นี่ */
}
#ad-1 li#วอเตอร์แบ็ค (
ความกว้าง: 1200px;
ส่วนสูง: 84px;
ภาพพื้นหลัง : url (../images/ad-1/water-back.png ) ;

ดัชนี z: 1;
ตำแหน่ง: แน่นอน;
ด้านล่าง : 10px ;
ซ้าย : -20px ;
แอนิเมชั่น: water-back-animation 3s การเข้า-ออกที่ไม่มีที่สิ้นสุด; /* เอฟเฟกต์น้ำเด้ง */
}
#ad-1 li#ริมน้ำ (
ความกว้าง: 1200px;
ส่วนสูง: 158px;
ภาพพื้นหลัง : url ( ../images/ad-1/water-front.png) ;
พื้นหลังซ้ำ : ทำซ้ำ-x ;
ดัชนี z: 3;
ตำแหน่ง: แน่นอน;
ด้านล่าง : -70px ;
ซ้าย: -30px;
แอนิเมชั่น: แอนิเมชั่นริมน้ำ 2s ความง่ายในการเข้า - ออกที่ไม่มีที่สิ้นสุด; /* เอฟเฟกต์เด้งน้ำอีกอย่างหนึ่ง - แตกต่างนิดหน่อย เราจะทำให้แอนิเมชั่นนี้เร็วขึ้นเล็กน้อยเพื่อสร้างมุมมอง -
}
ตอนนี้เรามาสร้างสไตล์สำหรับเรือและองค์ประกอบทั้งหมดกันดีกว่า เราจะเรียกภาพเคลื่อนไหวที่เหมาะสมอีกครั้ง:
#ad-1 ul#boat (
ความกว้าง: 249px;
ส่วนสูง: 215px;
ดัชนี z: 2;
ตำแหน่ง: แน่นอน;
ด้านล่าง : 25px ;
ซ้าย: 20px;
ล้น: มองเห็นได้;
แอนิเมชั่น: เรือในแอนิเมชั่น 3s 1 คลายออก; /* ย้ายกลุ่มไปที่จุดเริ่มต้น */
}
#ad-1 ul#โบท ลี (
ความกว้าง: 249px;
ส่วนสูง: 215px;
ภาพพื้นหลัง : url (../images/ad-1/boat.png ) ;
ตำแหน่ง: แน่นอน;
ด้านล่าง : 0px ;
ซ้าย: 0px;
ล้น: มองเห็นได้;
แอนิเมชั่น: แอนิเมชั่นเรือ 2s การเข้า-ออกที่ไม่มีที่สิ้นสุด; /* การเลียนแบบเรือที่กำลังโยกอยู่บนน้ำ - แอนิเมชั่นที่คล้ายกันนี้ถูกนำมาใช้กับน้ำแล้ว -
}
#ad-1 #เครื่องหมายคำถาม (
ความกว้าง: 24px;
ความสูง: 50px;
ภาพพื้นหลัง : url ( ../images/ad-1/question-mark.png) ;
ตำแหน่ง: แน่นอน;
ขวา: 34px;
ด้านบน: -30px;
แอนิเมชั่น: ดีเลย์ - เฟด - แอนิเมชั่น 4s 1 ง่ายต่อการเข้า - ออก; /* ซ่อนเครื่องหมายคำถาม */
}
สุดท้ายนี้ เราจะสร้างสไตล์สำหรับกลุ่มคลาวด์และสำหรับคลาวด์เดี่ยว นอกจากนี้เรายังจะเรียกใช้แอนิเมชั่นที่ค่อนข้างเรียบร้อยซึ่งจะทำให้เอฟเฟกต์การเลื่อนต่อเนื่อง นี่คือตัวอย่างสิ่งที่จะเกิดขึ้น:

นี่คือสไตล์:
#ad-1 #เมฆ (
ตำแหน่ง: แน่นอน;
ด้านบน: 0px;
ดัชนี z: 0;
แอนิเมชั่น: แอนิเมชั่นคลาวด์ 30s เชิงเส้นไม่มีที่สิ้นสุด; /* เคลื่อนเมฆไปทางซ้ายไม่จำกัดจำนวนครั้ง */
}
#ad-1 #cloud-group-1 (
ความกว้าง: 720px;
ตำแหน่ง: แน่นอน;
ซ้าย: 0px;
}
#ad-1 #cloud-group-2 (
ความกว้าง: 720px;
ตำแหน่ง: แน่นอน;
ซ้าย: 720px;
}
#ad-1 .cloud-1 (
ความกว้าง: 172px;
ส่วนสูง: 121px;
ภาพพื้นหลัง : url (../images/ad-1 /cloud-1 .png);
ตำแหน่ง: แน่นอน;
ด้านบน: 10px;
ซ้าย: 40px;
}
#ad-1 .คลาวด์-2 (
ความกว้าง: 121px;
ความสูง: 75px;
ภาพพื้นหลัง : url (../images/ad-1 /cloud-2 .png);
ตำแหน่ง: แน่นอน;
ด้านบน: -25px;
ซ้าย: 300px;
}
#ad-1 .cloud-3 (
ความกว้าง: 132px;
ความสูง: 105px;
ภาพพื้นหลัง : url (../images/ad-1 /cloud-3 .png);
ตำแหน่ง: แน่นอน;
ด้านบน: -5px;
ซ้าย: 530px;
}
อุ๊ฟ! มีโค้ด CSS มากมาย แต่สิ่งที่น่าสนใจที่สุดคือต่อไป!
แอนิเมชั่น

ข้อควรจำ: จนถึงขณะนี้ยังไม่มีแอนิเมชั่นจริง หากคุณดูแบนเนอร์ตอนนี้ คุณจะเห็นบางสิ่งที่แม้แต่เบราว์เซอร์รุ่นเก่าก็ยังแสดงได้ นั่นก็คือโฆษณาแบบคงที่ กับตอนนี้เราจะสร้างภาพเคลื่อนไหวที่เราเรียกไปแล้วในโค้ด CSS ของเรา
ตอนนี้แบนเนอร์ของเราแสดงผลได้ดีแล้ว มาทำให้โฆษณาแบบคงที่นี้มีชีวิตขึ้นมากันเถอะ! ตรงไปที่โค้ดกันดีกว่า - ฉันจะบอกคุณในความคิดเห็นว่าจะเกิดอะไรขึ้น:
บทสรุป
ในระหว่างบทช่วยสอนนี้ เราได้เรียนรู้ประเด็นสำคัญของการสร้างภาพเคลื่อนไหวที่รองรับเบราว์เซอร์รุ่นเก่า:
1. องค์ประกอบลูกสืบทอดภาพเคลื่อนไหวของผู้ปกครอง นอกเหนือจากภาพเคลื่อนไหวของตัวเอง เราสามารถใช้สิ่งนี้เพื่อสร้างภาพเคลื่อนไหวที่ซับซ้อนมากขึ้น
2. สำหรับสไตล์โฆษณาของเรา เราต้องใช้ตัวเลือกที่เฉพาะเจาะจงมาก เพื่อไม่ให้โฆษณาของเราถูกแทนที่โดยสไตล์เว็บไซต์อื่น
3. จำเป็นต้องกำหนดสไตล์ให้กับองค์ประกอบต่างๆ เพื่อที่ว่าหากภาพเคลื่อนไหวของเราไม่สามารถเล่นได้ โฆษณาก็ควรจะดูดีต่อไป
4. เมื่อใดก็ตามที่เป็นไปได้ ให้ใช้ภาพเคลื่อนไหวเดียวสำหรับหลายองค์ประกอบ - เราประหยัดเวลาและป้องกันการแพร่ขยายโค้ด
5. เรามักเรียก Internet Explorer ว่าเป็น "เบราว์เซอร์แห่งศตวรรษที่ 18" ในขณะเดียวกันก็ส่ายหมัดด้วยความรังเกียจและโกรธเคือง -
ขอให้โชคดีกับการทดสอบ CSS ของคุณ
สวัสดี ภารกิจคือ: “สร้างแบนเนอร์ HTML ที่ปรับเปลี่ยนได้ซึ่งจะปรับให้เข้ากับขนาดหน้าจอต่างๆ โดยจะมีตัวนับเวลาที่เหลือและปุ่มปิด และทั้งหมดนี้ควรนับการคลิกด้วยเพื่อรวบรวมสถิติเกี่ยวกับการเปลี่ยนผ่าน บน TT Adriver”
ขั้นแรก เรามาดูกันว่ารูปแบบใดที่ได้รับความนิยมมากที่สุดเมื่อสร้างแบนเนอร์ดังกล่าว:
โดยทั่วไปแล้ว มีแบนเนอร์เหล่านี้อยู่เป็นจำนวนมาก คุณสามารถทำความคุ้นเคยกับข้อกำหนดและรูปแบบทางเทคนิคทั้งหมดได้ที่นี่: คลิก แต่เราจะใช้เพียงบางส่วนเท่านั้น เพราะ ส่วนที่เหลือไม่เกี่ยวข้องอีกต่อไปหรือเกือบจะทำซ้ำสิ่งเหล่านี้:
1. แบนเนอร์แบบเต็มหน้าจอ - แบนเนอร์ที่คุณเห็นในรถไฟใต้ดินหรือบนเว็บไซต์ wifi แบนเนอร์เหล่านี้จะขยายเต็มหน้าจอ มีตัวนับและปุ่มปิด หากต้องการสร้างแบนเนอร์ดังกล่าว เราเพียงเตรียมภาพนิ่งหรือภาพเคลื่อนไหว GIF แบบธรรมดา (ไม่เกิน 600KB) จากนั้นจึงจัดวางทุกอย่างในรูปแบบ HTML

   แบนเนอร์แบบเต็มหน้าจอ

2. แบนเนอร์ FullWidth มีความน่าสนใจมากกว่าอยู่แล้ว แต่จริงๆ แล้วแบนเนอร์เหล่านี้เป็นเพียงแบนเนอร์ HTML5 ทั่วไป ซึ่งขยายได้เพียง 100% ของความกว้างหน้าจอ แต่มีความสูงคงที่ แบนเนอร์ดังกล่าวมักใช้แอนิเมชั่นและถูกสร้างขึ้นแล้วในโปรแกรมเช่น นักออกแบบเว็บไซต์ของ Google, Adobe Edge เคลื่อนไหว , Adobe เคลื่อนไหว CC . โดยส่วนตัวแล้วฉันใช้ Edge Animate เป็นประจำ สะดวกกว่า เร็วกว่า และมีความสามารถในการอัปโหลดไปยัง HTML5 ได้อย่างรวดเร็ว เมื่อสร้างแบนเนอร์ดังกล่าว ในตอนแรกสตอรี่บอร์ดจะถูกสร้างขึ้นโดยมีตัวเลือกว่าแบนเนอร์นี้จะมีลักษณะอย่างไรในขนาดหน้าจอที่แตกต่างกัน

   

   แบนเนอร์สตอรี่บอร์ดที่มีความกว้าง 100%

3. แบนเนอร์ที่มีขนาดคงที่หรือคงที่ ก็ค่อนข้างง่าย ที่นี่คุณเพียงสร้างโฆษณาหรือกระดานเรื่องราว และสิ่งที่คุณต้องทำคือเขียนโค้ดสำหรับการนับคลิก ในการสร้างแบนเนอร์ดังกล่าว ฉันมักจะใช้ Adobe Photoshop หรือ Edge Animate หากเป็นภาพเคลื่อนไหว อย่าใช้ GIF ที่นี่!คุณจะไม่สามารถอัปโหลดภาพเคลื่อนไหว GIF ที่มีขนาดสูงสุด 600KB ได้ และหากภาพเคลื่อนไหวมีน้ำหนักมากกว่านั้นจะไม่ได้รับอนุญาต แบนเนอร์ HTML ธรรมดาจะมีน้ำหนักไม่ถึง 200KB ซึ่งหมายความว่าคุณสามารถสร้างได้อย่างเต็มที่ที่นี่

กระดานเรื่องราวแบนเนอร์ที่มีขนาดคงที่
คำแนะนำในการสร้างแบนเนอร์แบบเต็มหน้าจอตามกฎทั้งหมด
การสร้างแบนเนอร์หมายความว่าขนาดจะเปลี่ยนเมื่อขนาดหน้าจอเปลี่ยนแปลง ซึ่งหมายความว่าแบนเนอร์จะใช้พื้นที่หน้าจอทั้งหมด ในลักษณะนี้:
ซึ่งหมายความว่ารูปภาพควรดูดีเท่ากันในทุกอุปกรณ์ ดังนั้นจึงสรุปได้ว่าควรจะเป็นเช่นนั้น คุณภาพค่อนข้างดีและขนาดก็ใกล้เคียงกัน สี่เหลี่ยม(ไม่มีขนาดตายตัว ทุกอย่างค่อนข้างยืดหยุ่นที่นี่) ในขณะนี้ เรากำลังมุ่งเน้นไปที่อุปกรณ์เคลื่อนที่ (มือถือ) และแท็บเล็ต (แท็บเล็ต) ดังนั้นเราจึงใช้รูปสี่เหลี่ยมผืนผ้าสำหรับการดูในโหมดแนวตั้ง (แนวตั้ง) ไปที่ Photoshop และสร้างเอกสารตามขนาดที่ต้องการ ในกรณีนี้คือ 536x714:

แหล่ง Gif สำหรับสร้างแบนเนอร์แบบเต็มหน้าจอ
ฉันสร้าง GIF จากสองเฟรม น้ำหนักของมันคือ 242KB น้ำหนักของเราควรจะสูงถึง 600KB เสมอ จำไว้ ตอนนี้เราต้องเปลี่ยนสิ่งนี้ให้เป็นแบนเนอร์ HTML จริง เราเปิดคำแนะนำในการสร้างแบนเนอร์แบบเต็มหน้าจอนำข้อกำหนดทางเทคนิคจากนั้นปิดมันเขียนอย่างงุ่มง่ามมาก ลืมเรื่อง Flash ไปเลย มันตายอย่างกล้าหาญ เรามีแค่ HTML5 ดังนั้นเราจึงจำเป็นต้องมีข้อกำหนดทางเทคนิคเพื่อสร้างแบนเนอร์โดยใช้โค้ด Ajax
ไม่มีข้อจำกัดเกี่ยวกับเลย์เอาต์ ที่นี่เรามีอิสระที่จะทำอะไรก็ได้ที่เราต้องการ สิ่งสำคัญคือมีคุณสมบัติพื้นฐานอยู่ กล่าวคือ: อ่านการคลิกจากแบนเนอร์ มีตัวนับและกากบาทสำหรับปิด สำหรับการเขียนโค้ด ฉันใช้ซอฟต์แวร์ Sublime Text ฟรี
เราเปิดไฟล์ HTML จากเทมเพลตของฉันและดูว่า:

โค้ดแบนเนอร์แบบเต็มหน้าจอมาตรฐาน



ปุ่มปิด
การคลิกจากแบนเนอร์อ่านได้อย่างไร และเหตุใดเราจึงไม่ใส่ลิงก์ไปยังหน้าที่แบนเนอร์ควรนำไป
ดังนั้น... ระบบ Adriver ให้คุณลงทะเบียนลิงค์เพื่อไปที่ไซต์ได้หลังจากโหลดแบนเนอร์เข้าสู่ระบบแล้วปรากฎว่าในซอร์สโค้ดของเราเราลงทะเบียนเฉพาะตัวแปรซึ่งจะถูกแทนที่เมื่อโหลดเข้าสู่ระบบก็คือ ไม่ใช่งานของเราอีกต่อไป ในกรณีนี้ เราจะบันทึกการคลิกสำหรับคอนเทนเนอร์ทั้งหมดที่แบนเนอร์ของเราตั้งอยู่ โดยทั่วไปคือทุกสิ่งที่เราวางไว้
สำหรับเรามันเป็นแบนเนอร์และการคลิกจะถูกอ่านจากสิ่งนี้ สำหรับแบนเนอร์อื่นๆ มีข้อกำหนดทางเทคนิคที่แตกต่างกัน และการคลิกจะถูกอ่านแตกต่างออกไป ตอนนี้เรากำลังดูตัวอย่างที่เฉพาะเจาะจง
ตู้คอนเทนเนอร์พร้อมป้าย
ในบทเรียนอื่นๆ ฉันจะบอกคุณถึงวิธีสร้างแบนเนอร์ที่มีความกว้างหน้าจอ 100% พร้อมภาพเคลื่อนไหว และวิธีการสร้างและเตรียมเค้าโครงสำหรับเค้าโครงเว็บไซต์ตามกฎทั้งหมด
1. ไฟล์จากบทเรียน:
แบนเนอร์ FullScreen สำเร็จรูป: คลิก
ขอบคุณสำหรับความสนใจของคุณ ไม่ต้องสงสัยเลยว่าเป็นหนึ่งในความสว่างที่สุดเทรนด์ปี 2012 กำลังพัฒนาอยู่ซีซีเอส3 , HTML5. วันนี้เรานำเสนอภาพรวมตัวอย่างขนาดใหญ่และมีประโยชน์มาก " 20+: บทเรียนที่สร้างสรรค์และมีประโยชน์เกี่ยวกับ CSS3″ เสนอเมื่อสเปคกี้บอย - ตัวอย่างทั้งหมดจัดทำขึ้นในสะอาดโดยไม่ต้องใช้ JavaScript
เรามั่นใจว่าเทคนิคเหล่านี้จะเป็นประโยชน์สำหรับนักพัฒนาเว็บ!
บทเรียน CSS3 :
1. แกลเลอรี่ภาพ CSS3, แถบเลื่อน, เอฟเฟกต์พร้อมรูปภาพ
1.1.ตัวเลื่อนบน CSS3
ฉันไม่อยากจะเชื่อเลย แต่แถบเลื่อนที่มีเอฟเฟกต์ต่าง ๆ นี้สร้างขึ้นใน CSS3 โดยเฉพาะ ซึ่งน่าประทับใจมาก
1.2. พื้นหลังสำหรับเว็บไซต์แบบเต็มหน้าจอพร้อมเอฟเฟกต์แถบเลื่อนโดยใช้ CSS3
นักออกแบบเว็บไซต์ได้ทดลองใช้พื้นหลังที่แตกต่างกันสำหรับไซต์มาเป็นเวลานาน แต่จนถึงขณะนี้ CSS บริสุทธิ์มีน้อยมากที่สามารถทำได้ เราต้องใช้ JS ตอนนี้ CSS3 เปิดโอกาสให้คุณทำงานกับพื้นหลังของเว็บไซต์ของคุณตามที่คุณต้องการ - คุณสามารถมีพื้นหลังเดียวพร้อมรูปถ่ายขนาดใหญ่คุณภาพสูง คุณสามารถเปลี่ยนพื้นหลังหลายแบบด้วยเอฟเฟกต์ที่แตกต่างกัน และพื้นหลังสามารถปรับขนาดได้ขึ้นอยู่กับหน้าจอ พารามิเตอร์ โดยทั่วไปแล้ว โอกาสอันน่าทึ่งสำหรับไซต์สร้างสรรค์
1.3. ไลท์บ็อกซ์บน CSS3
ด้วยบทช่วยสอนนี้ คุณจะได้เรียนรู้วิธีสร้างไลท์บ็อกซ์ที่มีเอฟเฟกต์หลากหลายโดยใช้ CSS ล้วนๆ
1.4. คุณสมบัติรูปภาพใน CSS3
บทช่วยสอนนี้สาธิตคุณสมบัติใหม่ใน CSS3 สำหรับคุณสมบัติของรูปภาพ เช่น มุมโค้งมน เงา และเอฟเฟกต์อื่นๆ
1.5. แบนเนอร์ภาพเคลื่อนไหวด้วย CSS3
1.6 แผงการโหลดใน CSS3
1.7. ริบบิ้น 3 มิติพร้อม CSS3

ดูการสาธิตหรือดาวน์โหลดไฟล์โค้ด CSS3 →
2. เมนู CSS3 การนำทางและปุ่มต่างๆ
2.1. เมนู Apple.com ใน CSS3
บทช่วยสอนสำหรับการสร้างเมนู Apple.com ที่มีชื่อเสียงใน CSS3
2.2. เมนูแนวนอนแบบเคลื่อนไหวใน CSS3
บทช่วยสอนง่ายๆ ที่แสดงวิธีสร้างเมนูภาพเคลื่อนไหวใน CSS3 พร้อมเอฟเฟกต์ต่างๆ
2.3. เมนูแนวตั้งแบบเคลื่อนไหวด้วย CSS3
2.4. ปุ่มเคลื่อนไหวด้วย CSS3
บทช่วยสอนที่ยอดเยี่ยมพร้อมตัวอย่างปุ่มสร้างสรรค์แบบเคลื่อนไหว 7 ตัวอย่าง
2.5. เมนูภาพเคลื่อนไหวที่สร้างสรรค์พร้อมรูปภาพโดยใช้ CSS3
ในบทเรียนนี้ ตัวอย่าง 10 ตัวอย่างที่นำเสนอเป็นเพียงการเปิดหูเปิดตา เมนูสร้างสรรค์ที่ซับซ้อนดังกล่าวเคยสร้างขึ้นโดยใช้ JS โดยเฉพาะ ประทับใจ!
2.6. เอฟเฟกต์การนำทางแบบวงกลมด้วย CSS3
เอฟเฟกต์ที่ผิดปกติเมื่อวางเมาส์เหนือรายการนำทางที่เลือกในรูปแบบของวงกลมพร้อมรูปภาพ รับทราบ!
2.7. เมนูแบบเลื่อนลงใน CSS3
บทช่วยสอนการใช้เมนูแบบเลื่อนลงอย่างง่ายพร้อมระดับย่อยใน CSS3
2.8. การนำทาง CSS3 พร้อมการเปลี่ยนภาพเคลื่อนไหว
3. เอฟเฟกต์ต่าง ๆ บน CSS3
3.1. เคล็ดลับเครื่องมือแบบเคลื่อนไหวใน CSS3 ที่ไม่มี jQuery

มาสร้างแบนเนอร์โฆษณาด้วย CSS3 กันเถอะ ปัจจุบันรองรับเฉพาะภาพเคลื่อนไหว CSS3 เท่านั้น เบราว์เซอร์ไฟร์ฟอกซ์และเว็บคิท แต่มันง่ายพอที่จะทำให้แบนเนอร์ทำงานในเบราว์เซอร์อื่นได้ อย่างไรก็ตาม อย่าคาดหวังประสิทธิภาพที่ยอดเยี่ยมในทุกที่ (โดยเฉพาะใน IE 7 และเก่ากว่า) เมื่อทดลองใช้เทคนิค CSS ล่าสุด
บันทึก:เพื่อประหยัดพื้นที่บนเพจ จึงละเว้นคำนำหน้าของผู้ผลิตเบราว์เซอร์ทั้งหมด ดูรหัสในแหล่งที่มา
มาร์กอัป HTML
ก่อนอื่น มาดูโครงสร้างของแบนเนอร์ในรูปแบบ HTML กันก่อน ในขั้นตอนนี้ เราต้องจินตนาการว่าแอนิเมชันจะทำงานอย่างไร:
สูญหาย?
ผ่อนคลาย - เราจะช่วย

เพื่อความเข้าใจที่ลึกซึ้งยิ่งขึ้นเกี่ยวกับโครงสร้างมาร์กอัป เรามาเน้นที่เรือกันดีกว่า:
มีภาพเคลื่อนไหวสามแบบเกิดขึ้นกับเรือ:
เรือลื่นไถลไปทางซ้าย นำไปใช้กับรายการที่ไม่เรียงลำดับ (กลุ่ม)

จำลองเรือโยกอยู่บนน้ำ นำไปใช้กับรายการ (เรือ)

การปรากฏตัวของเครื่องหมายคำถาม นำไปใช้กับองค์ประกอบ div (เครื่องหมายคำถาม)
หากคุณดูที่หน้าสาธิต คุณจะเห็นว่าภาพเคลื่อนไหวสำหรับรายการ (เรือ) ยังส่งผลต่อองค์ประกอบ div ที่อยู่ภายในด้วย (เครื่องหมายคำถาม) นอกจากนี้ แอนิเมชั่น "เลื่อนออก" สำหรับรายการที่ไม่เรียงลำดับยังใช้ได้กับรายการ (เรือและเครื่องหมายคำถาม)
ดังนั้นเราจึงสรุปได้ว่าองค์ประกอบย่อยได้รับภาพเคลื่อนไหวของผู้ปกครองนอกเหนือจากการกระทำของตนเอง ตอนนี้สิ่งที่เหลืออยู่คือการแสดงรายการโครงสร้างหลัก/รอง
ซีเอสเอส
ก่อนที่คุณจะเริ่มดูการสร้างแอนิเมชั่น คุณต้องแน่ใจว่ามีความเข้ากันได้แบบย้อนหลังกับเบราว์เซอร์รุ่นเก่า
ความเข้ากันได้แบบย้อนหลัง
เราจะรับประกันความเข้ากันได้แบบย้อนหลังโดยเพียงแค่จัดรูปแบบมาร์กอัปราวกับว่าไม่มีภาพเคลื่อนไหว CSS เลย หากมีคนดูหน้าเว็บในเบราว์เซอร์เก่า พวกเขาจะเห็นภาพนิ่งปกติ และไม่ว่างเปล่า
ตัวอย่างเช่น ถ้าคุณใช้ CSS ล่ะ? คล้ายๆกับข้างล่างนี้ก็จะมีปัญหาดังนี้
/* ผิด! */ @keyframe our-fade-in-animation ( 0% (opacity:0;) 100% (opacity:1;) ) div ( opacity: 0; /* div นี้ถูกซ่อนไว้ตามค่าเริ่มต้น - อ๊ะ! */ ภาพเคลื่อนไหว: -เฟดในแอนิเมชั่นของเรา 1s 1 )
หากเบราว์เซอร์ไม่รองรับภาพเคลื่อนไหว องค์ประกอบ div จะไม่ปรากฏแก่ผู้ใช้
และนี่คือวิธีที่เราจะรับประกันความเข้ากันได้แบบย้อนหลังกับเบราว์เซอร์รุ่นเก่า:
/* TRUE */ @keyframe our-fade-in-animation ( 0% (opacity:0;) 100% (opacity:1;) ) div ( ความทึบ: 1; /* div นี้มองเห็นได้โดยค่าเริ่มต้น */ ภาพเคลื่อนไหว: -เฟดในแอนิเมชั่นของเรา 1s 1 )
ตอนนี้องค์ประกอบ div จะแสดงขึ้นแม้ว่าภาพเคลื่อนไหวจะล้มเหลวในการเริ่มต้นก็ตาม และใน เบราว์เซอร์ที่ทันสมัย div จะถูกซ่อนไว้ในช่วงเริ่มต้นระหว่างภาพเคลื่อนไหว
วาร์ป
ตอนนี้เรารู้วิธีรับรองความเข้ากันได้แบบย้อนหลังแล้ว (ซึ่งจะช่วยหลีกเลี่ยงปัญหาเมื่อทำงานกับโปรเจ็กต์จริง) ถึงเวลาสร้างฐานของโค้ด CSS ของเราแล้ว
คุณต้องจำ 3 คะแนน:
เนื่องจากแบนเนอร์จะถูกใช้ในเว็บไซต์ต่างๆ เราจะทำให้ตัวเลือก CSS ทั้งหมดของเรามีความพิเศษโดยทั้งหมดจะเริ่มต้นด้วยตัวระบุ #ad-1 วิธีนี้เราจะพยายามหลีกเลี่ยงการทับซ้อนกันระหว่างโค้ดของเรากับโค้ดไซต์

เราตั้งใจที่จะเพิกเฉยต่อความล่าช้าของแอนิเมชั่นในการติดตั้ง หากคุณใช้การหน่วงเวลาของภาพเคลื่อนไหวเมื่อตั้งค่าสไตล์ด้วยการมองเห็นองค์ประกอบเริ่มต้น โครงสร้างแบนเนอร์จะถูกรบกวนเนื่องจากการหายไปอย่างกะทันหันหรือลักษณะของบางส่วนของภาพหลังจากภาพเคลื่อนไหวเสร็จสิ้น ความล่าช้าของภาพเคลื่อนไหวจะจำลองตามระยะเวลาและการตั้งค่าของเฟรม

เมื่อใดก็ตามที่เป็นไปได้ เราใช้ภาพเคลื่อนไหวเดียวสำหรับหลายองค์ประกอบวิธีนี้จะช่วยประหยัดเวลาและลดขนาดโค้ด
เรามาสร้างพื้นฐานสำหรับแบนเนอร์ของเรากันดีกว่า มาตั้งค่าตำแหน่งที่สัมพันธ์กันเพื่อให้สามารถวางองค์ประกอบภายในได้อย่างถูกต้อง จะซ่อนสิ่งใดก็ตามที่อยู่นอกขอบเขตขององค์ประกอบด้วย:
#ad-1 ( กว้าง: 720px; ความสูง: 300px; ลอย: ซ้าย; ระยะขอบ: 40px อัตโนมัติ 0; ภาพพื้นหลัง: url(../images/ad-1/พื้นหลัง.png); ตำแหน่งพื้นหลัง: กึ่งกลาง; พื้นหลัง - ทำซ้ำ: ไม่ทำซ้ำ ล้น: ซ่อนเร้น;
จากนั้นเรากำหนดสไตล์สำหรับข้อความและช่องป้อนข้อมูล เรียกภาพเคลื่อนไหวที่เหมาะสม คุณต้องตรวจสอบให้แน่ใจด้วยว่าเนื้อหามีดัชนี z สูงที่สุดสำหรับส่วนที่เคลื่อนไหว เพื่อไม่ให้ทับซ้อนกัน:
#ad-1 #content ( width: 325px; float: right; margin: 40px; text-align: center; z-index: 4; ตำแหน่ง: สัมพันธ์; ล้น: มองเห็นได้; ) #ad-1 h2 ( ตระกูลแบบอักษร: "Alfa Slab One", ตัวเขียน; สี: #137dd5; line-height: 50px; text-shadow: 0px 0px 4px #fff; ล่าช้า */ ) #ad-1 h3 ( ตระกูลแบบอักษร: "Boogaloo", ตัวเขียน; สี: #202224; ขนาดตัวอักษร: 31px; ความสูงบรรทัด: 31px; เงาข้อความ: 0px 0px 4px #fff; ภาพเคลื่อนไหว: ล่าช้า -fade-animation 10s 1 easy-in-out; /* ลักษณะของ h3 พร้อมการหน่วงเวลาจำลอง */ ) #ad-1 form ( ส่วนต่าง: 30px 0 0 6px; ตำแหน่ง: สัมพันธ์กัน; แอนิเมชั่น: form-animation 12s 1 ง่ายต่อการเข้า -out; /* เลื่อนแบบฟอร์มสำหรับป้อนที่อยู่อีเมลออกโดยมีความล่าช้าจำลอง */ ) #ad-1 #email ( width: 158px; height: 48px; float: left; padding: 0 20px; font-size: 16px; ตระกูลแบบอักษร: "Lucida Grande", sans-serif; text-shadow: 1px 0px #a2917d; border-bottom-left-radius: 5px;
เส้นขอบ:1px ทึบ #a2917d;
#ad-1 ul#water( /* หากคุณต้องการภาพเคลื่อนไหวอื่นเกี่ยวกับน้ำ คุณสามารถเพิ่มได้ที่นี่ */ ) #ad-1 li#water-back ( width: 1200px; height: 84px; background-image: url( .. /images/ad-1/water-back.png); ซ้ำพื้นหลัง: z-index: 1; ตำแหน่ง: สัมบูรณ์; ซ้าย: -20px; * การเลียนแบบคลื่นที่กระเซ็น */ ) #ad-1 li#water-front ( width: 1200px; height: 158px; background-image: url(../images/ad-1/water-front .png); background- ทำซ้ำ: ดัชนี z: 3; ด้านล่าง: -70px; แอนิเมชั่น: แอนิเมชั่นริมน้ำ 2s ความง่ายในการออกไม่สิ้นสุด; จำลองการสาดของคลื่นเร็วขึ้นเล็กน้อยเพื่อสร้างเอฟเฟกต์เปอร์สเปคทีฟ
มากำหนดสไตล์ของเรือและองค์ประกอบต่างๆ กัน เรายังเรียกภาพเคลื่อนไหวที่เกี่ยวข้องด้วย:
#ad-1 ul#boat ( กว้าง: 249px; ความสูง: 215px; ดัชนี z: 2; ตำแหน่ง: สัมบูรณ์; ด้านล่าง: 25px; ซ้าย: 20px; ล้น: มองเห็นได้; แอนิเมชั่น: โบ๊ทในแอนิเมชั่น 3 วินาที 1 การค่อยๆ ออก ; /* เลื่อนกลุ่มเมื่อโฆษณาเริ่มเล่น */ ) #ad-1 ul#boat li ( width: 249px; height: 215px; background-image: url(../images/ad-1/boat.png); ตำแหน่ง: สัมบูรณ์; ด้านล่าง: 0px; ล้น: มองเห็นได้; แอนิเมชั่น: แอนิเมชั่นเรือ 2s ความง่ายดายในการออก; /* จำลองเรือที่ลอยอยู่ในน้ำ - คล้ายกับแอนิเมชั่นที่ใช้แล้วบนน้ำเอง ad-1 #เครื่องหมายคำถาม ( กว้าง: 24px; ความสูง: 50px; ภาพพื้นหลัง: url(../images/ad-1/question-mark.png); ตำแหน่ง: สัมบูรณ์; ขวา: 34px; ด้านบน: -30px ; แอนิเมชั่น: ดีเลย์-เฟด-แอนิเมชั่น 4s 1 ง่ายต่อการเข้า-ออก; /* จางลงในเครื่องหมายคำถาม */ )
ตอนนี้เรามาสร้างสไตล์สำหรับก้อนเมฆกันดีกว่า สำหรับพวกเขา เราจะใช้แอนิเมชันที่มีเอฟเฟกต์ของการเคลื่อนไหวที่ไม่มีที่สิ้นสุด ภาพประกอบแสดงให้เห็นถึงแก่นแท้ของแนวคิด:

และนี่คือโค้ด CSS:
#ad-1 #clouds ( ตำแหน่ง: สัมบูรณ์; ด้านบน: 0px; z-index: 0; ภาพเคลื่อนไหว: ภาพเคลื่อนไหวบนคลาวด์ 30s เชิงเส้นไม่มีที่สิ้นสุด; /* เลื่อนเมฆไปทางซ้าย รีเซ็ตและทำซ้ำ */ ) #ad-1 # cloud-group -1 ( width:720px; ตำแหน่ง: แน่นอน; ซ้าย:0px; ) #ad-1 #cloud-group-2 ( ความกว้าง: 720px; ตำแหน่ง: แน่นอน; ซ้าย: 720px; ) #ad-1 .cloud- 1 ( ความกว้าง : 172px; ความสูง: 121px; url(../images/ad-1/cloud-1.png); ตำแหน่ง: ด้านบนแบบสัมบูรณ์: 40px; ( ความกว้าง: 121px; ความสูง: 75px; ภาพพื้นหลัง: url( ../images/ad-1/cloud-2.png); ตำแหน่ง: สัมบูรณ์; ด้านบน: -25px; ซ้าย: 300px; ) #ad-1 : url(../images/ad-1/cloud-3.png); ตำแหน่ง: สัมบูรณ์; ด้านบน: -5px;
ภาพเคลื่อนไหว
คำเตือน:จากจุดนี้ไป ไม่มีสิ่งใดที่เคลื่อนไหวได้จริงๆ หากคุณดูแบนเนอร์ของเราตอนนี้ คุณจะเห็นภาพนิ่ง นี่คือที่ที่สร้างและเรียกใช้ภาพเคลื่อนไหวในโค้ดด้านบน
ตอนนี้มาเติมชีวิตชีวาให้กับภาพนิ่งที่สวยงามของเรา:
/* ภาพเคลื่อนไหวการหน่วงเวลาจำลองใช้เพื่อแสดงองค์ประกอบหลายรายการ การจำลองความล่าช้าจะดำเนินการโดยเริ่มกระบวนการโดยที่ 80% ของภาพเคลื่อนไหวดำเนินต่อไป (และไม่ใช่ในทันที) วิธีนี้คุณสามารถจำลองการหน่วงเวลาได้: */ @keyframes Delayed-fade-animation ( 0% (opacity: 0;) 80% (opacity: 0;) 100% (opacity: 1;) ) /* Animation สำหรับการแสดงแบบฟอร์ม กับ ที่อยู่อีเมลและปุ่ม การเลียนแบบความล่าช้ายังใช้ */ @keyframes form-animation ( 0% (ความทึบ: 0; ขวา: -400px;) 90% (ความทึบ: 0; ขวา: -400px;) 95% (ความทึบ: 0.5; ขวา: 20px ;) 100% (ความทึบ: 1; ขวา: 0px;) ) /* แอนิเมชั่นนี้ใช้เพื่อนำเรือออกจากหน้าจอในตอนต้นของวิดีโอ: */ @keyframes boat-in-animation ( 0% (ซ้าย: -200px;) 100% (ซ้าย : 20px;) ) /* แอนิเมชันสำหรับคลาวด์ เมฆกลุ่มแรกเริ่มเคลื่อนที่จากศูนย์กลาง และกลุ่มที่สอง - ไปทางขวาของหน้าจอ กลุ่มแรกจะถูกลบออกจากหน้าจออย่างช้าๆ และกลุ่มที่สองจะปรากฏทางด้านขวา เมื่อกลุ่มด้านซ้ายถูกซ่อนไว้อย่างสมบูรณ์ เมฆจะกลับสู่ตำแหน่งเดิมอย่างรวดเร็ว: */ @keyframes cloud-animation ( 0% (left: 0px;) 99.9999% (left: -720px;) 100% (left: 0px;) ) ) / * ภาพเคลื่อนไหวสามภาพสุดท้ายเกือบจะเหมือนกัน - ความแตกต่างอยู่ที่การวางตำแหน่งขององค์ประกอบ พวกเขาจำลองการกระเซ็นของคลื่นทะเล: */ @keyframes boat-animation ( 0% (ด้านล่าง: 0px; ซ้าย: 0px;) 25% (ด้านล่าง: -2px; ซ้าย: -2px;) 70% (ด้านล่าง: 2px; ซ้าย : - 4px;) 100% (ล่าง: -1px; ซ้าย: 0px;) ) @keyframes water-back-animation ( 0% (ล่าง: 10px; ซ้าย: -20px;) 25% (ล่าง: 8px; ซ้าย: - 22px; ) 70% (ล่าง: 12px; ซ้าย: -24px;) 100% (ล่าง: 9px; ซ้าย: -20px;) ) @keyframes water-front-animation ( 0% (ล่าง: -70px; ซ้าย: -30px ;) 25% (ล่าง: -68px; ซ้าย: -32px;) 70% (ล่าง: -72px; ซ้าย: -34px;) 100% (ล่าง: -69px; ซ้าย: -30px;) )
บทสรุป
ในบทเรียนนี้ เราได้เรียนรู้แนวคิดหลักหลายประการ:
1. องค์ประกอบทายาทจะได้รับแอนิเมชั่นของผู้ปกครองนอกเหนือจากแอนิเมชั่นของตัวเอง
2. เมื่อสร้างแบนเนอร์ คุณควรพยายามใช้ตัวระบุที่ไม่ซ้ำกันเพื่อหลีกเลี่ยงการทับซ้อนโค้ดกับโปรเจ็กต์ CSS ที่มีอยู่
3. ควรเลือกตำแหน่งและรูปแบบขององค์ประกอบราวกับว่าไม่มีภาพเคลื่อนไหวเพื่อให้แน่ใจว่าสามารถใช้งานร่วมกันได้แบบย้อนหลัง
4. หากเป็นไปได้ คุณควรใช้ภาพเคลื่อนไหวเดียวสำหรับหลายองค์ประกอบ