Css animation, create animation with css, html css tutorial for beginners, html css full course, html css

post

@# Create a Login Form with HTML and CSS #@

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

HTML Code

यह HTML कोड एक लोडर (Loader) एनीमेशन बनाने के लिए उपयोग किया गया है। इस कोड में कई डिव (div) एलिमेंट्स शामिल हैं, जो मिलकर लोडर के विभिन्न हिस्सों को बनाते हैं। आइए इस कोड को विस्तार से समझें:

बाहरी कंटेनर (loader):
div class="loader"लोडर एनीमेशन का मुख्य कंटेनर है। इसमें सभी बॉक्स और ग्राउंड एलिमेंट्स शामिल हैं। बॉक्स एलिमेंट्स (box boxX):

div class="box box0" से लेकर div class="box box7" तक आठ बॉक्स एलिमेंट्स हैं। प्रत्येक बॉक्स के अंदर एक खाली डिव है, जो एनीमेशन या स्टाइलिंग के लिए हो सकता है।

box0, box1, box2, आदि, प्रत्येक बॉक्स के लिए अलग-अलग क्लास हैं, जिनका उपयोग CSS में अलग-अलग स्टाइलिंग के लिए किया जा सकता है।

ग्राउंड एलिमेंट (ground):

संक्षेप में: यह कोड एक लोडर एनीमेशन का ढांचा (structure) तैयार करता है, जिसमें आठ बॉक्स और एक ग्राउंड एलिमेंट शामिल हैं। प्रत्येक बॉक्स और ग्राउंड के अंदर एक खाली डिव है, जो CSS का उपयोग करके विभिन्न स्टाइल और एनीमेशन इफेक्ट्स को लागू करने के लिए तैयार किया गया है।

CSS Code

box-sizing: border-box;

margin: 0;

padding: 0;

}

body{

background: #e8e8e8;

justify-content: center;

align-items: center;

}

.loader {

--duration: 3s;

--primary: green;

--primary-light: seagreen;

--primary-rgba: deepskyblue;

position: relative;

top: 170px;

left: 40%;

width: 200px;

height: 320px;

position: relative;

transform-style: preserve-3d;

}

@media (max-width: 480px) {

.loader {

zoom: 0.44;

}

.loader:before, .loader:after {

--r: 20.5deg;

content: "";

width: 320px;

height: 140px;

position: absolute;

right: 32%;

bottom: -11px;

/* change the back groung color on switching from light to dark mood */

background: #e8e8e8;

transform: translateZ(200px) rotate(var(--r));

-webkit-animation: mask var(--duration) linear forwards infinite;

animation: mask var(--duration) linear forwards infinite;

}

.loader:after {

--r: -20.5deg;

right: auto;

left: 32%;

}

.loader .ground {

position: absolute;

left: -50px;

bottom: -120px;

transform-style: preserve-3d;

transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);

}

.loader .ground div {

transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);

width: 200px;

height: 200px;

background: black;

background: linear-gradient(45deg, var(--primary) 0%, var(--primary) 50%, var(--primary-light) 50%, var(--primary-light) 100%);

transform-style: preserve-3d;

-webkit-animation: ground var(--duration) linear forwards infinite;

animation: ground var(--duration) linear forwards infinite;

}

.loader .ground div:before, .loader .ground div:after {

--rx: 90deg;

--ry: 0deg;

--x: 44px;

--y: 162px;

--z: -50px;

content: "";

width: 156px;

height: 300px;

opacity: 0;

background: linear-gradient(var(--primary), var(--primary-rgba));

position: absolute;

transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));

-webkit-animation: ground-shine var(--duration) linear forwards infinite;

animation: ground-shine var(--duration) linear forwards infinite;

}

.loader .ground div:after {

--rx: 90deg;

--ry: 90deg;

--x: 0;

--y: 177px;

--z: 150px;

}

.loader .box {

--x: 0;

--y: 0;

position: absolute;

-webkit-animation: var(--duration) linear forwards infinite;

animation: var(--duration) linear forwards infinite;

transform: translate(var(--x), var(--y));

}

.loader .box div {

background-color: var(--primary);

width: 48px;

height: 48px;

position: relative;

transform-style: preserve-3d;

-webkit-animation: var(--duration) ease forwards infinite;

animation: var(--duration) ease forwards infinite;

transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);

}

.loader .box div:before, .loader .box div:after {

--rx: 90deg;

--ry: 0deg;

--z: 24px;

--y: -24px;

--x: 0;

content: "";

position: absolute;

background-color: inherit;

width: inherit;

height: inherit;

transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));

filter: brightness(var(--b, 1.2));

}

.loader .box div:after {

--rx: 0deg;

--ry: 90deg;

--x: 24px;

--y: 0;

--b: 1.4;

}

.loader .box.box0 {

--x: -220px;

--y: -120px;

left: 58px;

top: 108px;

}

.loader .box.box1 {

--x: -260px;

--y: 120px;

left: 25px;

top: 120px;

}

.loader .box.box2 {

--x: 120px;

--y: -190px;

left: 58px;

top: 64px;

}

.loader .box.box3 {

--x: 280px;

--y: -40px;

left: 91px;

top: 120px;

}

.loader .box.box4 {

--x: 60px;

--y: 200px;

left: 58px;

top: 132px;

}

.loader .box.box5 {

--x: -220px;

--y: -120px;

left: 25px;

top: 76px;

}

.loader .box.box6 {

--x: -260px;

--y: 120px;

left: 91px;

top: 76px;

}

.loader .box.box7 {

--x: -240px;

--y: 200px;

left: 58px;

top: 87px;

}

.loader .box0 {

-webkit-animation-name: box-move0;

animation-name: box-move0;

}

.loader .box0 div {

-webkit-animation-name: box-scale0;

animation-name: box-scale0;

}

.loader .box1 {

-webkit-animation-name: box-move1;

animation-name: box-move1;

}

.loader .box1 div {

-webkit-animation-name: box-scale1;

animation-name: box-scale1;

}

.loader .box2 {

-webkit-animation-name: box-move2;

animation-name: box-move2;

}

.loader .box2 div {

-webkit-animation-name: box-scale2;

animation-name: box-scale2;

}

.loader .box3 {

-webkit-animation-name: box-move3;

animation-name: box-move3;

}

.loader .box3 div {

-webkit-animation-name: box-scale3;

animation-name: box-scale3;

}

.loader .box4 {

-webkit-animation-name: box-move4;

animation-name: box-move4;

}

.loader .box4 div {

-webkit-animation-name: box-scale4;

animation-name: box-scale4;

}

.loader .box5 {

-webkit-animation-name: box-move5;

animation-name: box-move5;

}

.loader .box5 div {

-webkit-animation-name: box-scale5;

animation-name: box-scale5;

}

.loader .box6 {

-webkit-animation-name: box-move6;

animation-name: box-move6;

}

.loader .box6 div {

-webkit-animation-name: box-scale6;

animation-name: box-scale6;

}

.loader .box7 {

-webkit-animation-name: box-move7;

animation-name: box-move7;

}

.loader .box7 div {

-webkit-animation-name: box-scale7;

animation-name: box-scale7;

}

@-webkit-keyframes box-move0 {

12% {

transform: translate(var(--x), var(--y));

}

25%, 52% {

transform: translate(0, 0);

}

80% {

transform: translate(0, -32px);

}

90%, 100% {

transform: translate(0, 188px);

}

@keyframes box-move0 {

12% {

transform: translate(var(--x), var(--y));

}

25%, 52% {

transform: translate(0, 0);

}

80% {

transform: translate(0, -32px);

}

90%, 100% {

transform: translate(0, 188px);

}

@-webkit-keyframes box-scale0 {

6% {

transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);

}

14%, 100% {

transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);

}

@keyframes box-scale0 {

6% {

transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);

}

14%, 100% {

transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);

}

@-webkit-keyframes box-move1 {

16% {

transform: translate(var(--x), var(--y));

}

29%, 52% {

transform: translate(0, 0);

}

80% {

transform: translate(0, -32px);

}

90%, 100% {

transform: translate(0, 188px);

}

@keyframes box-move1 {

16% {

transform: translate(var(--x), var(--y));

}

29%, 52% {

transform: translate(0, 0);

}

80% {

transform: translate(0, -32px);

}

90%, 100% {

transform: translate(0, 188px);

}

@-webkit-keyframes box-scale1 {

10% {

transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);

}

18%, 100% {

transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);

}

@keyframes box-scale1 {

10% {

transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);

}

18%, 100% {

transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);

}

@-webkit-keyframes box-move2 {

20% {

transform: translate(var(--x), var(--y));

}

33%, 52% {

transform: translate(0, 0);

}

80% {

transform: translate(0, -32px);

}

90%, 100% {

transform: translate(0, 188px);

}

@keyframes box-move2 {

20% {

transform: translate(var(--x), var(--y));

}

33%, 52% {

transform: translate(0, 0);

}

80% {

transform: translate(0, -32px);

}

90%, 100% {

transform: translate(0, 188px);

}

@-webkit-keyframes box-scale2 {

14% {

transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);

}

22%, 100% {

transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);

}

@keyframes box-scale2 {

14% {

transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);

}

22%, 100% {

transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);

}

@-webkit-keyframes box-move3 {

24% {

transform: translate(var(--x), var(--y));

}

37%, 52% {

transform: translate(0, 0);

}

80% {

transform: translate(0, -32px);

}

90%, 100% {

transform: translate(0, 188px);

}

@keyframes box-move3 {

24% {

transform: translate(var(--x), var(--y));

}

37%, 52% {

transform: translate(0, 0);

}

80% {

transform: translate(0, -32px);

}

90%, 100% {

transform: translate(0, 188px);

}

@-webkit-keyframes box-scale3 {

18% {

transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);

}

26%, 100% {

transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);

}

@keyframes box-scale3 {

18% {

transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);

}

26%, 100% {

transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);

}

@-webkit-keyframes box-move4 {

28% {

transform: translate(var(--x), var(--y));

}

41%, 52% {

transform: translate(0, 0);

}

80% {

transform: translate(0, -32px);

}

90%, 100% {

transform: translate(0, 188px);

}

@keyframes box-move4 {

28% {

transform: translate(var(--x), var(--y));

}

41%, 52% {

transform: translate(0, 0);

}

80% {

transform: translate(0, -32px);

}

90%, 100% {

transform: translate(0, 188px);

}

@-webkit-keyframes box-scale4 {

22% {

transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);

}

30%, 100% {

transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);

}

@keyframes box-scale4 {

22% {

transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);

}

30%, 100% {

transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);

}

@-webkit-keyframes box-move5 {

32% {

transform: translate(var(--x), var(--y));

}

45%, 52% {

transform: translate(0, 0);

}

80% {

transform: translate(0, -32px);

}

90%, 100% {

transform: translate(0, 188px);

}

@keyframes box-move5 {

32% {

transform: translate(var(--x), var(--y));

}

45%, 52% {

transform: translate(0, 0);

}

80% {

transform: translate(0, -32px);

}

90%, 100% {

transform: translate(0, 188px);

}

@-webkit-keyframes box-scale5 {

26% {

transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);

}

34%, 100% {

transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);

}

@keyframes box-scale5 {

26% {

transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);

}

34%, 100% {

transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);

}

@-webkit-keyframes box-move6 {

36% {

transform: translate(var(--x), var(--y));

}

49%, 52% {

transform: translate(0, 0);

}

80% {

transform: translate(0, -32px);

}

90%, 100% {

transform: translate(0, 188px);

}

@keyframes box-move6 {

36% {

transform: translate(var(--x), var(--y));

}

49%, 52% {

transform: translate(0, 0);

}

80% {

transform: translate(0, -32px);

}

90%, 100% {

transform: translate(0, 188px);

}

@-webkit-keyframes box-scale6 {

30% {

transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);

}

38%, 100% {

transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);

}

@keyframes box-scale6 {

30% {

transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);

}

38%, 100% {

transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);

}

@-webkit-keyframes box-move7 {

40% {

transform: translate(var(--x), var(--y));

}

53%, 52% {

transform: translate(0, 0);

}

80% {

transform: translate(0, -32px);

}

90%, 100% {

transform: translate(0, 188px);

}

@keyframes box-move7 {

40% {

transform: translate(var(--x), var(--y));

}

53%, 52% {

transform: translate(0, 0);

}

80% {

transform: translate(0, -32px);

}

90%, 100% {

transform: translate(0, 188px);

}

@-webkit-keyframes box-scale7 {

34% {

transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);

}

42%, 100% {

transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);

}

@keyframes box-scale7 {

34% {

transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);

}

42%, 100% {

transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);

}

@-webkit-keyframes ground {

0%, 65% {

transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);

}

75%, 90% {

transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);

}

100% {

transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);

}

@keyframes ground {

0%, 65% {

transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);

}

75%, 90% {

transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);

}

100% {

transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);

}

@-webkit-keyframes ground-shine {

0%, 70% {

opacity: 0;

}

75%, 87% {

opacity: 0.2;

}

100% {

opacity: 0;

}

@keyframes ground-shine {

0%, 70% {

opacity: 0;

}

75%, 87% {

opacity: 0.2;

}

100% {

opacity: 0;

}

@-webkit-keyframes mask {

0%, 65% {

opacity: 0;

}

66%, 100% {

opacity: 1;

}

@keyframes mask {

0%, 65% {

opacity: 0;

}

66%, 100% {

opacity: 1;

}

यह CSS कोड एक लोडर एनीमेशन बनाता है जिसमें बॉक्स और ग्राउंड एनीमेशन शामिल हैं। यहां प्रत्येक भाग का विवरण हिंदी में दिया गया है:

- **बॉडी सेटिंग्स:** बॉडी के लिए बैकग्राउंड ग्रे (#e8e8e8) है और कंटेंट को केंद्र में संरेखित किया गया है।

- **लोडर:** लोडर एक 3D एनीमेशन है जो हरे और समुद्री हरे रंग के साथ बनाया गया है। यह 200px चौड़ा और 320px ऊंचा है, जो स्क्रीन के केंद्र में स्थित है।

- **मीडिया क्वेरी:** 480px से कम स्क्रीन पर लोडर का आकार 0.44 गुणा छोटा हो जाता है।

- **ग्राउंड:** ग्राउंड एक एनीमेटेड तत्व है जो लोडर के नीचे स्थित होता है और इसे 3D में घुमाया गया है। इसमें एक डिव होता है जो हरे रंग के ग्रेडिएंट से भरा होता है।

- **बॉक्स:** लोडर में आठ बॉक्स होते हैं, जो विभिन्न दिशाओं में एनीमेशन करते हैं। प्रत्येक बॉक्स का अपना एनीमेशन नाम और समय है, जो बॉक्स को स्थानांतरित और स्केल करता है।

- **की-फ्रेम्स:** अलग-अलग की-फ्रेम्स बॉक्स और ग्राउंड की एनीमेशन को नियंत्रित करते हैं, जैसे बॉक्स को स्थानांतरित करना, स्केल करना, और ग्राउंड पर शाइन इफेक्ट देना। यह सभी एनीमेशन 3 सेकंड में पूरी होती हैं और अनंत रूप से दोहराई जाती हैं।

यह कोड एक प्रभावशाली और जटिल 3D लोडर एनीमेशन बनाता है, जिसमें विभिन्न बॉक्स और ग्राउंड की गतिविधियां शामिल हैं।

JS Code

Output

Youtube whatsapp Facebook

Search This Blog

CSS PROJECTs FOR YOU