แม้ว่า ใส่หิมะเคลื่อนไหวบนหน้าไม่ว่าจะจากเราหรือจากลูกค้าดูเหมือนเป็นการออกแบบที่เก่าแก่กว่าสิ่งอื่นใดความจริงก็คือ ภาพเคลื่อนไหว ที่เรานำเสนอในโอกาสนี้คือทะเลแห่งความสง่างาม นอกจากนี้คุณไม่จำเป็นต้องใช้ JavaScript มันง่ายมาก CSS3.
สิ่งแรกคือการดูที่ ภาพเคลื่อนไหว.
ดูสวยดีใช่มั้ย? ในการนำไปใช้จริงเราต้องสร้างภาพสามจุดที่มีจุดสีขาวและทำให้เคลื่อนไหวโดยใช้คุณสมบัติ @คีย์เฟรม ของ CSS3 ดังนี้:
/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
การเพิ่มไฟล์ คำนำหน้าสำหรับเบราว์เซอร์ต่างๆจากนั้นสร้างร่างกายของเรา:
body {
background-color: #6b92b9;
background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
animation: snow 20s linear infinite;
}
ยังเพิ่มคำนำหน้าที่จำเป็น ขั้นตอนทั้งหมดพร้อมคำอธิบายโดยละเอียดโดยได้รับความอนุเคราะห์จาก Joshua Johnson มีอยู่ในบล็อกของเขา
ข้อมูลมากกว่านี้ - CSS3 Gradient Generator, CSS3 Gradient Generator
ที่มา - ออกแบบกระท่อม