Happy New Year Project in html and css full animation on January 07, 2022 Get link Facebook Twitter Pinterest Email Other Apps Happy New Year Project in html and css full animation Html part Happy New Year Happy New Year 202 1 2 CSS part *, *:after,*:before{ margin: 0; padding: 0; box-sizing: border-box; } body{ min-height: 100vh; /* background: url("background.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat; */ } .first{ width: 100%; font-family: cursive; font-size: 100px; font-weight: 700; color: rgb(1, 243, 61); text-align: center; position: absolute; top: 50%; opacity: 0; animation: animate1 2s ease-in-out 7s forwards; } .second{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; overflow: hidden; padding: 200px 100px 0px 0px; } .second span{ font-family: sans-serif; font-size: 175px; font-weight: 700; color: rgb(0, 230, 38); } span.past{ position: absolute; top: 50%; right: 50%; margin-right: -200px; animation: year_2021 5s ease-in-out 5s forwards; } span.now{ position: absolute; right: 0%; margin-right: -200px; animation: year_2022 6s ease-in-out forwards; } span.now:before{ content: ""; width: 0px; height: 6px; display: block; border-radius: 3px; background: rgb(66, 206, 90); transform: rotate(0deg); transform-origin: left top; position: absolute; top: 55px ; left: 10px; z-index: -1; animation: ballon 1s ease-in-out 4s; } .ballon{ width: 100px; height: 100px; display: block; border-radius: 50%; position: absolute; background:rgb(84, 204, 84) ; top: 50%; margin-top: -160px; right: 0; margin-right: -200px; animation: ballon2 10s ease-in-out forwards; } .ballon:before{ content: ""; width: 0; height: 0; border-style: solid; border-width: 0 10px 20px 10px; border-color: transparent transparent rgb(83, 206, 10) transparent ; position: absolute; left: 50%; bottom: -10px; margin-left: -10px; z-index: -1; } .ballon:after{ content: ""; width: 4px; height: 100px; display: block; background: #fff; border-radius: 0px 0px 3px 3px; position: absolute; left: 50px; margin: -2px; bottom: -110px; } .whole{ width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; overflow: hidden; } .whole>div{ position: absolute; opacity: 0; border: 2px solid #fff; animation: animate2 1.5s ease-in-out 8s forwards; } .whole>div.y1{ left: 20%; top: 40%; } .whole>div.y2{ left: 15%; top: 70%; } .whole>div.y3{ right: 20%; top: 40%; } .whole>div.y4{ right: 15%; top: 70%; } .whole>div span{ width: 6px ; height: 6px; display: block; top: 0; left: 0; opacity: 0; animation: animate3 0.5s ease-in-out 9s forwards; } .whole>div span:nth-child(1){ transform: rotate(0deg); } .whole>div span:nth-child(2){ transform: rotate(120deg); } .whole>div span:nth-child(3){ transform: rotate(24deg); } .whole>div span:before{ content: ""; width: 2px; height: 50px; display: block; background: #f5cc06; position: absolute; top: -60px; left: 2px; } .whole>div span:after{ content: ""; width: 2px; height: 50px; display: block; background: #f5cc06; position: absolute; bottom: -60px; left: 2px; } .whole>div span i:before{ content: ""; width: 3px ; height: 3px; display: block; border-radius: 50%; background: #fff; position: absolute; top: -15px; left: 10px; } .whole>div span i:after{ content: ""; width: 3px ; height: 3px; display: block; border-radius: 50%; background: #fff; position: absolute; bottom: -15px; right: 10px; } /* Animation */ @keyframes year_2022{ 0%{ right: 0%; } 66.6666%{ right: 50%; margin-right: -300px; } 90%{ right: 50%; margin-right: -300px; } 100%{ right:50%; } } @keyframes year_2021{ 0%{ top: 50%; } 100%{ top: -100%; } } @keyframes ballon{ 0%{ transform: rotate(-30deg); width: 40px; } 100%{ transform: rotate(-150deg); width: 70px; } } @keyframes ballon2{ 0%{ right: 0; } 40%{ right: 50%; margin-right: -300px; } 50%{ right: 50%; margin-right: -200px; top: 50%; } 100%{ top: -100%; right: 50%; } } @keyframes animate1{ 0%{ margin-top: 0px; opacity: 0; } 100%{ margin-top: -200px; opacity: 1; } } @keyframes animate2{ 0%{ margin-top: 100%; opacity: 0; width: 2px ; height: 30px; display: block; border-radius: 50%; } 75%{ margin-top: 0%; opacity: 0; width: 2px ; height: 30px; display: block; border-radius: 50%; } 80%{ margin-top: 0%; margin-left: 0%; opacity: 1; width: 10px ; height: 10px; display: block; border-radius: 50%; transform: scale(0.2); } 100%{ opacity: 1; width: 10px ; height: 10px; display: block; border-radius: 50%; transform: scale(1); } } @keyframes animate3{ 0%{ opacity: 0; } 100%{ opacity: 1; } } Comments
Comments
Post a Comment