الثلج المتحرك مع CSS

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

إضافة البادئات الضرورية أيضًا. يمكن العثور على الإجراء الكامل مع التوضيحات التفصيلية ، بإذن من جوشوا جونسون ، على مدونته.

معلومات اكثر - مولد التدرج CSS3 ، مولد التدرج CSS3
المصدر - تصميم شاك