यह सरल डेमो बताता है कि दिलचस्प दृश्य प्रभावों के लिए सीएसएस एनिमेशन का उपयोग कैसे करें।

अपनी वेबसाइट या एप्लिकेशन में एक एनिमेटेड पृष्ठभूमि जोड़ने से एक अद्वितीय, दिलचस्प डिज़ाइन में योगदान मिल सकता है। रचनात्मक पृष्ठभूमि भावनाओं को जागृत कर सकती है और उपयोगकर्ता अनुभव को बढ़ा सकती है।

आपके एप्लिकेशन के लिए एनिमेटेड पृष्ठभूमि बनाने के कई तरीके हैं, लेकिन सादे HTML और CSS का एक सरल संयोजन विशेष रूप से अच्छी तरह से काम करता है। इस उदाहरण को देखें, जानें कि इसका कोड कैसे काम करता है, और अंतिम एनिमेटेड पृष्ठभूमि का लाइव डेमो देखें।

HTML संरचना बनाएं

आप बुलबुले के साथ एक नीले रंग की पृष्ठभूमि बनाने जा रहे हैं जो बढ़ते हैं और ऊपर की ओर तैरते हैं। आप इस पर अंतिम परिणाम देख सकते हैं कोडपेन.

बनाकर प्रारंभ करें अनुभाग कक्षा के साथ आवरण एनीमेशन को रखने के लिए.

फिर, 10 divs बनाएं जो बुलबुले का प्रतिनिधित्व करेंगे। प्रत्येक डिव के अंदर, क्लास के साथ एक स्पैन बनाएं डॉट. तुम कर सकते हो इन आवश्यक HTML टैग्स को 10 मिनट में सीखें यदि आप HTML में नए हैं।

<body>
<sectionclass="wrapper">
<h1>Animated Backgroundh1





instagram viewer

>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
section>
body>

सीएसएस कोड के साथ शैली

आप अविश्वसनीय बना सकते हैं केवल HTML का उपयोग करके पृष्ठभूमि प्रभाव. लेकिन इस प्रोजेक्ट के लिए, आप पृष्ठभूमि को स्टाइल और एनिमेट करने के लिए सीएसएस का उपयोग करेंगे।

सबसे पहले, पृष्ठभूमि के आसपास कोई रिक्त स्थान सुनिश्चित करने के लिए मार्जिन और पैडिंग को 0 पर सेट करें।

* {
margin: 0;
padding: 0;
}

फिर, रैपर क्लास का उपयोग करके मूल अनुभाग को स्टाइल करें। इस अनुभाग में पूरे पृष्ठ को भरने के लिए 100% चौड़ाई और ऊंचाई होगी। इसके पृष्ठभूमि रंग को नीले रंग की छाया के रूप में सेट करें और इसे पूर्ण स्थिति दें।

.wrapper {
height: 100%;
width: 100%;
background-color: #0066cc;
position: absolute;
}

H1 को भी पूर्ण स्थिति के साथ स्टाइल करें। इसे पृष्ठ के केंद्र में रखने के लिए, इसकी ऊपरी बाईं स्थिति को 50% पर सेट करके प्रारंभ करें। फिर इसे ऊपर और बाईं ओर ले जाने के लिए ट्रांसलेशन का उपयोग करें, ताकि इसका केंद्र बिल्कुल बीच में हो।

.wrapperh1 {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
font-family: sans-serif;
word-spacing: 2px;
color: #fff;
font-size: 2rem;
font-weight: 900;
}

इसके बाद, divs को स्टाइल करें जो एनिमेटेड बुलबुले के रूप में कार्य करने के लिए गोलाकार होंगे। प्रत्येक div को ऊँचाई, चौड़ाई और बॉर्डर दें। बड़ी सीमा-त्रिज्या सुनिश्चित करती है कि सीमा एक वृत्त है। इसके अलावा, सीएसएस एनीमेशन प्रॉपर्टी का उपयोग करके एनीमेशन अवधि निर्धारित करें।

.wrapperdiv {
height: 60px;
width: 60px;
border: 2pxsolidrgba(255, 255, 255, 0.7);
border-radius: 100px;
position: absolute;
top: 10%;
left: 10%;
animation: 4slinearinfinite;
}

बिंदुओं को 5px ऊँचाई और चौड़ाई के साथ स्टाइल करें। बिंदुओं को एक सीमा-त्रिज्या और एक सफेद पृष्ठभूमि दें। प्रत्येक को बिल्कुल उसके मूल प्रभाग के शीर्ष-दाएँ के करीब रखें।

div.dot {
height: 5px;
width: 5px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 20%;
right: 20%;
}

इसके बाद, प्रत्येक डिव को अलग-अलग सेटिंग्स के साथ रखने के लिए nth-child चयनकर्ता का उपयोग करें। आप एनीमेशन को नाम दे सकते हैं चेतन; आप इसे बाद में @keyframes का उपयोग करके परिभाषित करेंगे।

उपयोग नौवाँ बच्चा (2) पहले संबोधित करने के लिए डिव के पहले बच्चे के बाद से .आवरण तत्व है एच 1.

.wrapperdiv:nth-child(2) {
top: 20%;
left: 20%;
animation: animate 8slinearinfinite;
}
.wrapperdiv:nth-child(3) { 
top: 60%;
left: 80%;
animation: animate 10slinearinfinite;
}


.wrapperdiv:nth-child(4) { 
top: 40%;
left: 40%; 
animation: animate 3slinearinfinite;
}


.wrapperdiv:nth-child(5) {
top: 66%;
left: 30%;
animation: animate 7slinearinfinite;
}
.wrapperdiv:nth-child(6) {
top: 90%;
left: 10%;
animation: animate 9slinearinfinite;
}

आप निम्न डिवों को उच्च प्रतिशत दे सकते हैं ताकि वे विभिन्न अंतरालों पर शीर्ष पर पहुंचें।

.wrapperdiv:nth-child(7) {
top: 30%;
left: 60%;
animation: animate 5slinearinfinite;
}
.wrapperdiv:nth-child(8) {
top: 70%;
left: 20%;
animation: animate 8slinearinfinite;
}


.wrapperdiv:nth-child(9) {
top: 75%;
left: 60%;
animation: animate 10slinearinfinite;
}


.wrapperdiv:nth-child(10) {
top: 50%;
left: 50%;
animation: animate 6slinearinfinite;
}
.wrapperdiv:nth-child(11) {
top: 45%;
left: 20%;
animation: animate 10slinearinfinite;
}

विभिन्न अंतरालों पर वृत्तों और बिंदुओं को धीरे-धीरे बदलने और घुमाने के लिए @keyframes का उपयोग करें। निम्नलिखित कोड में, बिंदु 70 डिग्री पर और वृत्त 360 डिग्री पर घूमते हैं। यह घुमाव बुलबुला प्रभाव पैदा करता है।

@keyframes animate {
 0% {
transform: scale(0) translateY(0) rotate(70deg);
 }
 100% {
transform: scale(1.3) translateY(-100px) rotate(360deg);
 }
}

तुम कर सकते हो सीएसएस पैटर्न का उपयोग करके पृष्ठभूमि को अधिक स्टाइलिश बनाएं. पैटर्न आपको अद्भुत एनिमेशन बनाने में मदद करने के लिए तरंगें, ग्रिड, पत्तियां और अन्य पैटर्न बनाने की अनुमति देते हैं।

आप सीएसएस का उपयोग करके कई संपत्तियों को एनिमेट कर सकते हैं

आप CSS का उपयोग करके विभिन्न प्रकार के एनिमेशन बना सकते हैं। इनमें पृष्ठभूमि का रंग बदलना और एनीमेशन के रनटाइम में देरी करना शामिल है।

आप यह भी निर्धारित कर सकते हैं कि एनीमेशन कितनी बार चलना चाहिए, यहां तक ​​कि अनंत तक भी। आप यह भी निर्धारित कर सकते हैं कि एनीमेशन को किस दिशा में चलना चाहिए: आगे या पीछे। एनिमेशन के साथ खेलना मज़ेदार है और आप अपने एप्लिकेशन को जीवंत बनाने के लिए उनका उपयोग कर सकते हैं।