שלג מונפש עם CSS

למרות שים שלג מונפש על דףלא מאיתנו או מלקוח, זה נשמע כמו תרגול עיצוב מבוגר מכל דבר אחר, האמת היא ש animación שאנו מציגים בהזדמנות זו הוא ים האלגנטים. כמו כן אתה לא צריך JavaScript, זה פשוט CSS3.

הדבר הראשון הוא להסתכל על האנימציה.

נראה די טוב, נכון? כדי לממש זאת עלינו ליצור רק שלוש תמונות עם נקודות לבנות ולהנפיש אותן באמצעות המאפיין @keyframes של 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;
}

הוספת הקידומות הדרושות. ההליך המלא עם הסברים מפורטים, באדיבות ג'ושוע ג'ונסון, נמצא בבלוג שלו.

עוד מידע - מחולל שיפורים CSS3, מחולל שיפורים CSS3
מקור - עיצוב צריף