CSS3 में गिरने वाली वस्तुएं बनाएं
हिम उदाहरण
सीएसएस
CSS एनिमेशन क्या हैं?
एक एनीमेशन एक तत्व को धीरे-धीरे एक शैली से दूसरी शैली में बदलने देता है।
आप जितनी बार चाहें उतनी बार सीएसएस गुण बदल सकते हैं।
CSS एनिमेशन का उपयोग करने के लिए, आपको पहले एनिमेशन के लिए कुछ मुख्य-फ़्रेम निर्दिष्ट करने होंगे।
कीफ़्रेम धारण करते हैं कि निश्चित समय पर तत्व की कौन सी शैलियाँ होंगी।
एक लेख पर जाने का कोई मतलब नहीं है जो पहले से ही बहुत अच्छी तरह से समझाया गया है, इसलिए नीचे पृष्ठ का एक लिंक है।
यह HTML और CSS कोड है जिसका हमने उपयोग किया है।
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% बाईं ओर सेट हैं, और फिर बाएँ हाशिए को ऑब्जेक्ट की चौड़ाई के आधे पर सेट किया गया है।
