सीएसएससह अ‍ॅनिमेटेड बर्फ

CSS3 सह अ‍ॅनिमेटेड हिमवर्षाव

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


लेखाची सामग्री आमच्या तत्त्वांचे पालन करते संपादकीय नीति. त्रुटी नोंदविण्यासाठी क्लिक करा येथे.

टिप्पणी करणारे सर्वप्रथम व्हा

आपली टिप्पणी द्या

आपला ई-मेल पत्ता प्रकाशित केला जाणार नाही. आवश्यक फील्ड चिन्हांकित केले आहेत *

*

*

  1. डेटा जबाबदार: मिगुएल Áन्गल गॅटन
  2. डेटाचा उद्देशः नियंत्रण स्पॅम, टिप्पणी व्यवस्थापन.
  3. कायदे: आपली संमती
  4. डेटा संप्रेषण: कायदेशीर बंधन वगळता डेटा तृतीय पक्षास कळविला जाणार नाही.
  5. डेटा संग्रहण: ओकेन्टस नेटवर्क (EU) द्वारा होस्ट केलेला डेटाबेस
  6. अधिकारः कोणत्याही वेळी आपण आपली माहिती मर्यादित, पुनर्प्राप्त आणि हटवू शकता.