Create a loader with html and css, html css, html css tutorial for beginners, html css full course

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

इस HTML कोड में एक डिव

है, जिसमें छह अन्य डिव्स हैं: चार डिव्स जिन्हें क्लास 👉 दी गई है। एक डिव जिसे क्लास 🌴 दी गई है। एक डिव जिसे क्लास 👍 दी गई है।

CSS Code

.🤚 {

--skin-color: #E4C560;

--tap-speed: 0.6s;

--tap-stagger: 0.1s;

position: relative;

width: 80px;

height: 60px;

margin-left: 80px;

}

.🤚:before {

content: '';

display: block;

width: 180%;

height: 75%;

position: absolute;

top: 70%;

right: 20%;

background-color: black;

border-radius: 40px 10px;

filter: blur(10px);

opacity: 0.3;

}

.🌴 {

display: block;

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

background-color: var(--skin-color);

border-radius: 10px 40px;

}

.👍 {

position: absolute;

width: 120%;

height: 38px;

background-color: var(--skin-color);

bottom: -18%;

right: 1%;

transform-origin: calc(100% - 20px) 20px;

transform: rotate(-20deg);

border-radius: 30px 20px 20px 10px;

border-bottom: 2px solid rgba(0, 0, 0, 0.1);

border-left: 2px solid rgba(0, 0, 0, 0.1);

}

.👍:after {

width: 20%;

height: 60%;

content: '';

background-color: rgba(255, 255, 255, 0.3);

position: absolute;

bottom: -8%;

left: 5px;

border-radius: 60% 10% 10% 30%;

border-right: 2px solid rgba(0, 0, 0, 0.05);

}

.👉 {

position: absolute;

width: 80%;

height: 35px;

background-color: var(--skin-color);

bottom: 32%;

right: 64%;

transform-origin: 100% 20px;

animation-duration: calc(var(--tap-speed) * 2);

animation-timing-function: ease-in-out;

animation-iteration-count: infinite;

transform: rotate(10deg);

}

.👉:before {

content: '';

position: absolute;

width: 140%;

height: 30px;

background-color: var(--skin-color);

bottom: 8%;

right: 65%;

transform-origin: calc(100% - 20px) 20px;

transform: rotate(-60deg);

border-radius: 20px;

}

.👉:nth-child(1) {

animation-delay: 0;

filter: brightness(70%);

animation-name: tap-upper-1;

}

.👉:nth-child(2) {

animation-delay: var(--tap-stagger);

filter: brightness(80%);

animation-name: tap-upper-2;

}

.👉:nth-child(3) {

animation-delay: calc(var(--tap-stagger) * 2);

filter: brightness(90%);

animation-name: tap-upper-3;

}

.👉:nth-child(4) {

animation-delay: calc(var(--tap-stagger) * 3);

filter: brightness(100%);

animation-name: tap-upper-4;

}

@keyframes tap-upper-1 {

0%, 50%, 100% {

transform: rotate(10deg) scale(0.4);

}

40% {

transform: rotate(50deg) scale(0.4);

}

@keyframes tap-upper-2 {

0%, 50%, 100% {

transform: rotate(10deg) scale(0.6);

}

40% {

transform: rotate(50deg) scale(0.6);

}

@keyframes tap-upper-3 {

0%, 50%, 100% {

transform: rotate(10deg) scale(0.8);

}

40% {

transform: rotate(50deg) scale(0.8);

}

@keyframes tap-upper-4 {

0%, 50%, 100% {

transform: rotate(10deg) scale(1);

}

40% {

transform: rotate(50deg) scale(1);

}


  यह कोड एक स्टाइलिश हाथ का एनिमेशन बनाने के लिए है, 
जिसमें CSS का उपयोग किया गया है। यहाँ विभिन्न
 कक्षाओं का विवरण दिया गया है:

1. **.🤚**: यह मुख्य हाथ की स्टाइल है। यह हाथ का आकार,
 रंग और स्थिति निर्धारित करता है। इसमें एक छाया भी
 जोड़ी गई है।



2. **.🌴**: यह हाथ के पीछे की परत है, जो हाथ के रंग 
को लागू करती है और उसे गोलाई देती है।



3. **.👍**: यह अंगूठे की स्टाइल है। इसमें अंगूठे की स्थिति, 
आकार और रंग निर्धारित किया गया है। 
इसमें थोड़ी सी छाया भी जोड़ी गई है।



4. **.👍:after**: यह अंगूठे की चमक को दर्शाता है।



5. **.👉**: यह ऊँगलियों की स्टाइल है। यह ऊँगलियों
 की स्थिति, आकार और रंग निर्धारित करता है। ऊँगलियों को 
एनिमेट किया गया है ताकि वे टैप करती हुई दिखें।



6. **.👉:before**: यह ऊँगलियों की स्थिति और आकार 
को और अधिक सटीक बनाता है।



7. **@keyframes tap-upper-1, tap-upper-2, tap-upper-3, tap-upper-4**:
 ये एनिमेशन कीफ्रेम हैं, जो ऊँगलियों की गति
 और आकार परिवर्तन को नियंत्रित करते हैं। हर 
ऊँगली का टैप करने का पैटर्न अलग-अलग है।



कुल मिलाकर, यह कोड एक एनिमेटेड हाथ का प्रभाव 
उत्पन्न करता है, जिसमें ऊँगलियाँ बार-बार टैप करती हैं।

JS Code

Output

Youtube whatsapp Facebook

Search This Blog

CSS PROJECTs FOR YOU