שלג מונפש עם CSS

שלג מונפש עם CSS3

למרות שים שלג מונפש על דףלא מאיתנו או מלקוח, זה נשמע כמו תרגול עיצוב מבוגר מכל דבר אחר, האמת היא ש 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
מקור - עיצוב צריף


תוכן המאמר עומד בעקרונותינו של אתיקה עריכתית. כדי לדווח על שגיאה לחץ כאן.

היה הראשון להגיב

השאירו את התגובה שלכם

כתובת הדוא"ל שלך לא תפורסם.

*

*

  1. אחראי לנתונים: מיגל אנחל גטון
  2. מטרת הנתונים: בקרת ספאם, ניהול תגובות.
  3. לגיטימציה: הסכמתך
  4. מסירת הנתונים: הנתונים לא יועברו לצדדים שלישיים אלא בהתחייבות חוקית.
  5. אחסון נתונים: מסד נתונים המתארח על ידי Occentus Networks (EU)
  6. זכויות: בכל עת תוכל להגביל, לשחזר ולמחוק את המידע שלך.