साइट पर नया साल बैनर CSS3 का उपयोग कर

नए साल की छुट्टियों की पूर्व संध्या पर, लगभग हर साइट को वर्ष की मुख्य छुट्टी की विशेषताओं से सजाया जाता है। कोई माला बनाता है, कोई एनिमेटेड बर्फ बनाता है, कोई बेसमेंट में क्रिसमस ट्री लगाता है। अब मैं समझाने की कोशिश करूँगा कि कैसे एक सुंदर बनाने के लिए, मेरी राय में, और CSS3 का उपयोग करके साइट पर एक एनिमेटेड बैनर।


बैनर की मुख्य संरचना काफी कॉम्पैक्ट html में समाहित होगी।

<div class="header"> <h1>  !</h1> <div class="wrapper"> <div class="christmas-tree tree1"></div> <div class="christmas-tree tree2"></div> <div class="christmas-tree tree3"></div> <div class="snowman"></div> <div class="christmas-tree tree4"></div> <div class="christmas-tree tree5"></div> <div class="christmas-tree tree6"></div> </div> <div class="layer-snow"></div> </div> 

मुझे लगता है कि वर्ग के नामों से यह स्पष्ट है कि पृष्ठ पर हम एक बधाई, 6 क्रिसमस पेड़ और एक स्नोमैन देखेंगे, और हम वर्णन करते हैं कि वे कैसे सीएसएस में दिखते हैं।
शिलालेख "हैप्पी छुट्टियाँ!" के लिए, मैंने Google फ़ॉन्ट्स से फ़ॉन्ट को जोड़ा और H1 टैग के लिए पंजीकृत फ़ॉन्ट-परिवार को पंजीकृत किया।

 <link href='http://fonts.googleapis.com/css?family=Marck+Script&subset=latin,cyrillic' rel='stylesheet' type='text/css'> h1{ color: white; text-align: center; position: absolute; top: 10px; left: 0; right: 0; font-family: 'Marck Script', cursive; font-size: 3em; } 

ट्री 1, ..., ट्री 6 क्लासेस केवल पोजीशनिंग में भिन्न होते हैं; वे क्रिसमस-ट्री फाइल में पृष्ठभूमि के रूप में एक ही छवि का उपयोग करते हैं। हमारा स्नोमैन उसी तरह से बना है। आवश्यक पृष्ठभूमि भी कई फाइलों में निहित है।
तो, एक पृष्ठभूमि है, क्रिसमस के पेड़ हैं, जगह में एक स्नोमैन है। हमें केवल बर्फबारी की जरूरत है। बर्फबारी के एनीमेशन के आधार पर, मैंने पहले उल्लेख किया गया लेख लिया। मुख्य एनीमेशन फ्रेम नीचे दिखाए गए हैं।

  .header{ margin: 0 0 30px; position: relative; background-image: url(../img/snow3.png), url(../img/snow2.png); -webkit-animation: snow 20s linear infinite; -moz-animation: snow 20s linear infinite; animation: snow 20s linear infinite; } @keyframes snow { 0% {background-position: 0px 0px, 0px 0px;} 100% {background-position: 400px 400px, 300px 300px;} } .layer-snow{ background-image: url(../img/snow.png); -webkit-animation: snow-layer 30s linear infinite; -moz-animation: snow-layer 30s linear infinite; animation: snow-layer 30s linear infinite; position: absolute; left: 0; right: 0; top: 0; height: 315px; } @keyframes snow-layer { 0% {background-position: 0px 0px;} 100% {background-position: 500px 1000px;} } 

बर्फ के लिए 2 एनिमेशन हैं, उनमें से एक मुख्य चित्र (स्नोड्रिफ्ट्स, स्नोमैन, क्रिसमस ट्री) के पीछे है, दूसरा सामने है।
यह हमारे बैनर का एक शानदार डाउनलोड जोड़ने के लिए बना हुआ है, शायद "गिरना" आकाश सरल और स्वादिष्ट होगा।

  .snowman { width: 78px; height: 105px; top: 195px; left: 445px; background: url(../img/snowman.png); -moz-animation-duration: .6s; -webkit-animation-duration: .6s; animation-duration: .6s; } @keyframes animate-drop { 0% {opacity:0;transform: translate(0, -315px);} 100% {opacity:1;transform: translate(0, 0);} } 

ऐसा लगता है कि कुछ भी नहीं भूल गया है, डेमो देखा जा सकता है, वहां आप स्रोत डाउनलोड कर सकते हैं। दरअसल, मैंने इस लेख को प्रेरणा के रूप में इस्तेमाल किया। बैनर दुर्भाग्य से IE और ओपेरा में काम नहीं करता है, मुझे बाद वाले से कुछ भी नहीं मिला, IE मूल रूप से keyframes का समर्थन नहीं करता है (संस्करण 10 समर्थन करता है, लेकिन मैंने ऐसा नहीं किया या इसके लिए परीक्षण नहीं किया), यह धीरे-धीरे एंड्रॉइड के लिए भी काम करता है, हालांकि 5- फ्रेम 7 प्रति सेकंड, मुझे लगता है कि एनीमेशन के साथ कई चित्रों के ओवरले के कारण।