Css loader, loader with html and css

post

@# Create a hand loader with HTML and CSS #@

Creating a hand loader using HTML and CSS is a great way.Here's a step-by-step guide on how to make a hand loader.

HTML Code

</g>

</svg>

</mask>

</g>

</svg>

</g>

</svg>

</g>

</svg>

</svg>

</div>

CSS Code

.svg-frame {

position: relative;

width: 300px;

height: 300px;

transform-style: preserve-3d;

display: flex;

justify-content: center;

align-items: center;

}

.svg-frame svg {

position: absolute;

transition: .5s;

z-index: calc(1 - (0.2 * var(--j)));

transform-origin: center;

width: 344px;

height: 344px;

fill: none;

}

.svg-frame:hover svg {

transform: rotate(-80deg) skew(30deg) translateX(calc(45px * var(--i))) translateY(calc(-35px * var(--i)));

}

.svg-frame svg #center {

transition: .5s;

transform-origin: center;

}

.svg-frame:hover svg #center {

transform: rotate(-30deg) translateX(45px) translateY(-3px);

}

#out2 {

animation: rotate16 7s ease-in-out infinite alternate;

transform-origin: center;

}

#out3 {

animation: rotate16 3s ease-in-out infinite alternate;

transform-origin: center;

stroke: #ff0;

}

#inner3,

#inner1 {

animation: rotate16 4s ease-in-out infinite alternate;

transform-origin: center;

}

#center1 {

fill: #ff0;

animation: rotate16 2s ease-in-out infinite alternate;

transform-origin: center;

}

@keyframes rotate16 {

to {

transform: rotate(360deg);

}

यह CSS कोड एक तीन-आयामी घूर्णन प्रभाव वाली SVG एनीमेशन
बनाने के लिए उपयोग किया गया है। यहाँ इसके
मुख्य तत्वों का वर्णन हिंदी में किया गया है:

1. **.svg-frame**: यह एक कंटेनर वर्ग है जो 300x300
पिक्सल आकार का है। इसमें CSS `transform-style`
के माध्यम से 3D प्रभाव दिया गया है और इसके भीतर के तत्वों को केंद्र में संरेखित
(align) किया गया है।

2. **.svg-frame svg**: यह SVG तत्वों के लिए स्थिति
और शैली निर्धारित करता है। यह तत्वों को 0.5 सेकंड
की ट्रांज़िशन के साथ घुमाने और स्क्यू करने की
सुविधा प्रदान करता है। `z-index` का उपयोग तत्वों की
परतों को व्यवस्थित करने के लिए किया गया है।

3. **.svg-frame:hover svg**: जब .svg-frame
पर माउस होवर किया जाता है, तो SVG तत्व
80 डिग्री घूर्णन, 30 डिग्री स्क्यू, और X तथा Y
दिशाओं में ट्रांसलेट होता है। ये प्रभाव `calc()` के
माध्यम से प्रत्येक SVG के लिए अलग-अलग तय किए गए हैं।

4. **#center**: यह ID वाला तत्व केंद्र में स्थित होता है
और इसमें 0.5 सेकंड की ट्रांज़िशन और केंद्र से
घुमाव (rotate) की सुविधा होती है।

5. **#out2, #out3, #inner3, #inner1, #center1**:
ये विशेष SVG तत्व हैं जिनमें विभिन्न एनिमेशन लागू किए गए हैं। प्रत्येक में
`rotate16` नामक कीफ्रेम एनीमेशन लागू किया गया है,
जो उन्हें केंद्र के चारों ओर घुमाता है।

- `#out2`: 7 सेकंड की अवधि के साथ।
- `#out3`: 3 सेकंड की अवधि के साथ और इसका स्ट्रोक रंग पीला (#ff0) है।
- `#inner3, #inner1`: 4 सेकंड की अवधि के साथ।
- `#center1`: 2 सेकंड की अवधि के साथ और इसका भराव रंग पीला (#ff0) है।

6. **@keyframes rotate16**: यह कीफ्रेम एनीमेशन
है जो तत्वों को 360 डिग्री घुमाता है, जिससे घूर्णन प्रभाव उत्पन्न होता है।

इस कोड के माध्यम से, जब उपयोगकर्ता .svg-frame
पर होवर करता है, तो SVG तत्व 3D में घूमने और स्क्यू होने
लगते हैं, और साथ ही विभिन्न तत्व एक निर्धारित
अवधि के साथ घूर्णन करना शुरू करते हैं।

JS Code

Search This Blog

CSS PROJECTs FOR YOU

Css loader, loader with html and css

@# Create a hand loader with HTML and CSS #@

Comments

Post a Comment

Popular posts from this blog

Multiples way to earn money online at home without Investment

create a animated text with html and css

create apple logo with html and css