तरी एका पृष्ठावर एनिमेटेड बर्फ घाला, ते आमच्या कडून असो वा क्लायंटचे असो, हे इतर कोणत्याही गोष्टीपेक्षा जुने डिझाइन सराव असल्यासारखे वाटते, सत्य ते आहे अ‍ॅनिमेशन आम्ही या निमित्ताने सादर करतो तो मोहक समुद्र आहे. तसेच आपल्याला जावास्क्रिप्टची आवश्यकता नाही, हे सोपे आहे 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 ग्रेडियंट जनरेटर
स्रोत - डिझाइन शॅक