قد يبدو إضافة ثلج متحرك إلى صفحة ويب ، سواءً كانت صفحتنا أو صفحة عميل، أسلوبًا تصميميًا قديمًا، إلا أن الرسوم المتحركة التي نعرضها هنا في غاية الأناقة. والأفضل من ذلك، أنها لا تتطلب جافا سكريبت، بل هي ببساطة 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
المصدر - تصميم شاك