CSS3 में गिरने वाली वस्तुएं बनाएं

पूर्ण स्थिति और CSS3 एनीमेशन का उपयोग करके गिरने वाली वस्तुओं को बनाने के लिए सीएसएस का उपयोग करने का उदाहरण

हिम उदाहरण

सीएसएस

हमारी साइट पर एक वर्ष में क्रिसमस थीम के बारे में हमें कुछ अच्छी टिप्पणियां मिलीं, इसलिए कोड साझा करने का निर्णय लिया। डिज़ाइन ने पृष्ठों को स्टाइल करने के लिए केवल CSS का उपयोग किया, इसलिए प्लगइन्स की आवश्यकता के बिना सभी ब्राउज़रों पर काम किया।

CSS एनिमेशन क्या हैं?

एक एनीमेशन एक तत्व को धीरे-धीरे एक शैली से दूसरी शैली में बदलने देता है।

आप जितनी बार चाहें उतनी बार सीएसएस गुण बदल सकते हैं।

CSS एनिमेशन का उपयोग करने के लिए, आपको पहले एनिमेशन के लिए कुछ मुख्य-फ़्रेम निर्दिष्ट करने होंगे।

कीफ़्रेम धारण करते हैं कि निश्चित समय पर तत्व की कौन सी शैलियाँ होंगी।

एक लेख पर जाने का कोई मतलब नहीं है जो पहले से ही बहुत अच्छी तरह से समझाया गया है, इसलिए नीचे पृष्ठ का एक लिंक है।

यह HTML और CSS कोड है जिसका हमने उपयोग किया है।

W3C वेब साइट पर CCS3 एनिमेशन का उपयोग करना

HTML & CSS

<style type="text/css">.snowContainer{width: 100%; height: 300px; background-color: black; overflow: hidden; position: relative;}.snowExample{position: absolute; top: -450px; opacity: .5; text-align: center;animation: SnowExampleSlide ease-in infinite;-webkit-animation: SnowExampleSlide ease-in infinite;-moz-animation: SnowExampleSlide ease-in infinite;-webkit-animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;animation-fill-mode: forwards;}@keyframes SnowExampleSlide {from {position: absolute; top: -450px;} to {position: absolute; top: 633px;}}@-webkit-keyframes SnowExampleSlide {from {position: absolute; top: -450px;} to {position: absolute; top: 633px;}}@-moz-keyframes SnowExampleSlide {from {position: absolute; top: -450px;} to {position: absolute; top: 633px;}}</style><div class="snowContainer"><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 400px; -webkit-animation-delay: 0s;animation-delay: 0s;-webkit-animation-duration: 4s;animation-duration: 4s; left:50%; margin-left: -200px;" /><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 400px; -webkit-animation-delay: 1s;animation-delay: 1s;-webkit-animation-duration: 4s;animation-duration: 4s; left:50%; margin-left: -200px;" /><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 400px; -webkit-animation-delay: 2s;animation-delay: 2s; -webkit-animation-duration: 4s;animation-duration: 4s; left:50%; margin-left: -200px;" /><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 400px; -webkit-animation-delay: 3s;animation-delay: 3s; -webkit-animation-duration: 4s;animation-duration: 4s; left:50%; margin-left: -200px;" /><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 500px; -webkit-animation-delay: 0s;animation-delay: 0s; -webkit-animation-duration: 5s;animation-duration: 5s; left:50%; margin-left: -250px;" /><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 500px; -webkit-animation-delay: 2s;animation-delay: 2s; -webkit-animation-duration: 5s;animation-duration: 5s; left:50%; margin-left: -250px;" /></div>

सीएसएस

उदाहरण में चार छोटी छवियां हैं, और दो बड़ी, वे अलग-अलग गति से आगे बढ़ने के लिए तैयार हैं, जो आंख को यह सोचकर धोखा देती हैं कि वे करीब हैं।

शीर्ष के लिए स्थिति और समय को सही करने के लिए आपको एक निश्चित मात्रा में गणित का उपयोग करने की भी आवश्यकता होगी, उदाहरण के लिए यहां उपयोग की गई छवि 1198x999 पिक्सेल है, जो 300 पिक्सेल उच्च के एक div में है।

स्क्रीन पर छवि का आकार 400px चौड़ा पर सेट है, इसलिए स्थिति को ऊपर से कम से कम (400/1198)*999=333 पिक्सेल से शुरू करना होगा, और छवि की नई ऊंचाई और div ऊंचाई 333+300 पर जाना होगा =633.

जब स्थिति को निरपेक्ष पर सेट किया जाता है, तो किसी वस्तु को कैसे केन्द्रित किया जाए, इसका एक उदाहरण भी है। वे 50% बाईं ओर सेट हैं, और फिर बाएँ हाशिए को ऑब्जेक्ट की चौड़ाई के आधे पर सेट किया गया है।