सीएसएस के साथ एनिमेटेड बर्फ

हालांकि एक पृष्ठ पर एनिमेटेड बर्फ रखोयह हम से या एक ग्राहक से हो, यह एक डिजाइन अभ्यास की तरह लगता है और कुछ की तुलना में पुराने, सच यह है कि एनीमेशन इस अवसर पर हम मौजूद हैं कि सुंदर समुद्र है। इसके अलावा, आपको जावास्क्रिप्ट की आवश्यकता नहीं है, यह सरल है CSS3.

पहली बात यह है कि एक नज़र रखना है एनीमेशन.

बहुत अच्छा लग रहा है, है ना? इसे व्यवहार में लाने के लिए, हमें केवल सफेद डॉट्स के साथ तीन चित्र बनाने और उन्हें संपत्ति का उपयोग करके चेतन करने की आवश्यकता है @कीफ़्रेम सीएसएस 3 निम्नानुसार है:

/*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 ग्रेडिएंट जेनरेटर
स्रोत - डिजाइन झोंपड़ी