Document

CSS SQUARE ANIMATION WITH HTML AND CSS ONLY

यहाँ एक square एनीमेशन बनाया गया है जिसे html और css के द्वारा बनाया गया है। निचे इसके बारे में पूरी जानकारी दी गई है। निचे आप इसका source code भी देख और कॉपी केर सकते है।

यह HTML और CSS कोड एक एनिमेशन बनाता है जिसमें घूमते हुए वर्ग (squares) दिखाई देते हैं। ये वर्ग अलग-अलग आकार और कोणों में घूमते हैं, जिससे एक आकर्षक और गतिशील प्रभाव बनता है। नीचे इस कोड का विस्तृत विवरण हिंदी में दिया गया है:

HTML Structure:

1. **`<div class="cont">`**: यह एक कंटेनर (container) है जिसमें 19 `` एलिमेंट्स हैं। प्रत्येक `` को `dv` क्लास दी गई है।

2. **``**: ये सभी `` एलिमेंट्स वर्ग (squares) का प्रतिनिधित्व करते हैं। इन्हें CSS के माध्यम से स्टाइल और एनिमेट किया गया है।

**CSS Styling:**

*{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            min-height: 100vh;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #333;
        }
        .cont{
            width: 200px;
            height: 200px;
            border: none;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .dv{
            position: absolute;
            width: 100%;
            height: 100%;
            border: 3px solid orangered;
            transform: rotate(-10deg);
            animation: anime 4s linear infinite;
        }
        @keyframes anime{
          
           100%{
            transform: rotate(360deg);
            rotate: 360deg;
            filter: hue-rotate(360deg);
           }
        }
        .dv:nth-child(1){
            position: absolute;
            width: 190px;
            height: 190px;
            transform: rotate(-20deg);
        }
        .dv:nth-child(2){
            position: absolute;
            width: 180px;
            height: 180px;
            transform: rotate(-30deg);
        }
        .dv:nth-child(3){
            position: absolute;
            width: 170px;
            height: 170px;
            transform: rotate(-40deg);
        }
        .dv:nth-child(4){
            position: absolute;
            width: 160px;
            height: 160px;
            transform: rotate(-50deg);
        }
        .dv:nth-child(5){
            position: absolute;
            width: 150px;
            height: 150px;
            transform: rotate(-60deg);
        }
        .dv:nth-child(6){
            position: absolute;
            width: 140px;
            height: 140px;
            transform: rotate(-70deg);
        }
        .dv:nth-child(7){
            position: absolute;
            width: 130px;
            height: 130px;
            transform: rotate(-80deg);
        }
        .dv:nth-child(8){
            position: absolute;
            width: 120px;
            height: 120px;
            transform: rotate(-90deg);
        }
        .dv:nth-child(9){
            position: absolute;
            width: 110px;
            height: 110px;
            transform: rotate(-100deg);
        }
        .dv:nth-child(10){
            position: absolute;
            width: 100px;
            height: 100px;
            transform: rotate(-110deg);
        }
        .dv:nth-child(11){
            position: absolute;
            width: 90px;
            height: 90px;
            transform: rotate(-120deg);
        }
        .dv:nth-child(12){
            position: absolute;
            width: 80px;
            height: 80px;
            transform: rotate(-130deg);
        }
        .dv:nth-child(13){
            position: absolute;
            width: 70px;
            height: 70px;
            transform: rotate(-140deg);
        }
        .dv:nth-child(14){
            position: absolute;
            width: 60px;
            height: 60px;
            transform: rotate(-150deg);
        }
        .dv:nth-child(15){
            position: absolute;
            width: 50px;
            height: 50px;
            transform: rotate(-160deg);
        }
        .dv:nth-child(16){
            position: absolute;
            width: 40px;
            height: 40px;
            transform: rotate(-170deg);
        } 
        .dv:nth-child(17){
            position: absolute;
            width: 30px;
            height: 30px;
            transform: rotate(-180deg);
        }
        .dv:nth-child(18){
            position: absolute;
            width: 20px;
            height: 20px;
            transform: rotate(-190deg);
        }
        .dv:nth-child(19){
            position: absolute;
            width: 10px;
            height: 10px;
            transform: rotate(-200deg);
        }

1. **`*` (Universal Selector)**:

- सभी एलिमेंट्स के लिए `margin` और `padding` को `0` सेट किया गया है।

- `box-sizing: border-box;` का उपयोग करके एलिमेंट्स के साइज को बॉर्डर और पैडिंग सहित मैनेज किया गया है।

2. `body`:

- पृष्ठ (body) की न्यूनतम ऊंचाई (`min-height`) को पूरी स्क्रीन (`100vh`) के बराबर सेट किया गया है।

- पृष्ठ को फ्लेक्सबॉक्स (`display: flex;`) का उपयोग करके केंद्रित (centered) किया गया है।

- पृष्ठ का बैकग्राउंड रंग गहरा भूरा (`#333`) सेट किया गया है।

3. `.cont` (Container):

- कंटेनर की चौड़ाई और ऊंचाई `200px` सेट की गई है।

- इसे फ्लेक्सबॉक्स का उपयोग करके केंद्रित किया गया है।

- `position: relative;` सेट किया गया है ताकि इसके अंदर के एलिमेंट्स (``) को `position: absolute;` के साथ पोजिशन किया जा सके।

4. `.dv` (Squares):

- प्रत्येक वर्ग (``) को `position: absolute;` दिया गया है ताकि वे एक-दूसरे के ऊपर ओवरलैप कर सकें।

- प्रत्येक वर्ग का आकार `100%` (पैरेंट कंटेनर के आकार के अनुसार) सेट किया गया है।

- बॉर्डर `3px` मोटाई और रंग `orangered` सेट किया गया है।

- `transform: rotate(-10deg);` का उपयोग करके प्रत्येक वर्ग को थोड़ा घुमाया गया है।

- `animation: anime 4s linear infinite;` का उपयोग करके एक एनिमेशन लागू किया गया है, जो वर्ग को लगातार घुमाता है।

5. `@keyframes anime`:

- यह एनिमेशन वर्ग को `360deg` तक घुमाता है और `hue-rotate(360deg)` का उपयोग करके रंग को बदलता है।

- एनिमेशन 4 सेकंड (`4s`) में पूरा होता है और यह लगातार (`infinite`) चलता रहता है।

6. `.dv:nth-child(n)`:

- प्रत्येक वर्ग (``) के लिए अलग-अलग साइज और रोटेशन एंगल सेट किए गए हैं।

- उदाहरण के लिए:

- पहला वर्ग (`nth-child(1)`) का आकार `190px` और रोटेशन `-20deg` है।

- दूसरा वर्ग (`nth-child(2)`) का आकार `180px` और रोटेशन `-30deg` है।

- इसी तरह, प्रत्येक वर्ग का आकार घटता जाता है और रोटेशन एंगल बढ़ता जाता है।

एनिमेशन का प्रभाव:

सभी वर्ग एक साथ घूमते हैं, लेकिन उनके अलग-अलग आकार और रोटेशन एंगल के कारण एक सर्पिल (spiral) जैसा प्रभाव बनता है।

- `hue-rotate` के कारण वर्गों का रंग धीरे-धीरे बदलता रहता है, जिससे एनिमेशन और भी आकर्षक लगता है।

यह कोड एक सरल लेकिन प्रभावशाली एनिमेशन बनाता है, जिसमें घूमते हुए वर्ग एक सर्पिल जैसा पैटर्न बनाते हैं। यह CSS केनिष्कर्ष:** `transform`, `animation`, और `nth-child` जैसे प्रॉपर्टीज का उपयोग करके बनाया गया है। इसे और भी बेहतर बनाने के लिए, आप रंग, आकार, या एनिमेशन की गति को बदल सकते हैं।

Search This Blog

Coding Smraat