Wish your friend a Happy New Year 2022
Preview:
HTML Code:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Happy New Year 2022</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="loading">
<h2>2021</h2>
<div class="bar"></div>
<h2>2022</h2>
</div>
<div class="center">
<div><h2 class="one">Happy New Year</h2></div>
<div></div>
<div><h2 class="one">2022</h2></div>
<div></div>
</div>
</body>
</html>
CSS Code:
style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body
{
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
font-family: 'Poppins', sans-serif;
}
.center
{
position: relative;
width: 400px;
}
.center div
{
position: relative;
height: 100px;
margin: -30px 0;
z-index: 2;
transform: skewY(-5deg);
display: flex;
justify-content: center;
align-items: center;
}
.center div:nth-child(2),
.center div:nth-child(4)
{
transform: skewY(14.5deg);
z-index: 1;
}
.center div:nth-child(4)
{
transform: skewY(25deg);
transform-origin: left;
top: -52px;
}
.center div::before
{
content: '';
position: absolute;
width: 100%;
height: 100%;
}
.center div:nth-child(1)::before,
.center div:nth-child(3)::before
{
background: linear-gradient(-160deg, #ff0058, #673ab7);
transform: scaleX(0);
}
.center div:nth-child(2)::before,
.center div:nth-child(4)::before
{
background: linear-gradient(-20deg, #ff0058, #38009c);
transform: scaleX(0);
}
.center div:nth-child(1)::before
{
animation: animate 1s linear forwards;
transform-origin: right;
animation-delay: 12s;
}
.center div:nth-child(2)::before
{
animation: animate 1s linear forwards;
transform-origin: left;
animation-delay: 13s;
}
.center div:nth-child(3)::before
{
animation: animate 1s linear forwards;
transform-origin: right;
animation-delay: 14s;
}
.center div:nth-child(4)::before
{
animation: animate 1s linear forwards;
transform-origin: left;
animation-delay: 15s;
width: 60%;
left: 0;
}
@keyframes animate
{
0%
{
transform: scaleX(0);
}
100%
{
transform: scaleX(1);
}
}
.center div:nth-child(1)::after,
.center div:nth-child(3)::after
{
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background: rgba(255,255,255,.2)
}
.center div h2
{
position: relative;
margin: 0;
padding: 0;
z-index: 10;
opacity: 0;
color: #fff;
}
.center div:nth-child(1) h2
{
animation: fadeText 0.5s linear forwards;
animation-delay: 13s;
font-size: 40px;
}
.center div:nth-child(3) h2
{
animation: fadeText 0.5s linear forwards;
animation-delay: 15s;
font-size: 90px;
width: 800;
}
@keyframes fadeText
{
0%
{
opacity: 0;
}
100%
{
opacity: 1;
}
}
.loading
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
z-index: 15;
animation: fadeout 11s linear forwards;
}
@keyframes fadeout
{
0%,91%
{
opacity: 1;
visibility: visible;
}
100%
{
opacity: 0;
visibility: hidden;
}
}
.loading h2
{
color: #000;
}
.loading .bar
{
position: relative;
width: 400px;
height: 40px;
background: transparent;
margin: 0 20px;
border: 2px solid black;
box-sizing: border-box;
}
.loading .bar::before
{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
transform-origin: left;
animation: animate 10s linear forwards;
}
.loading .bar::after
{
content: 'Loading...';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 10px;
text-align: center;
line-height: 36px;
color: #fff;
font-size: 20px;
mix-blend-mode: difference;
}
Download all files from here:
-By CodeStudio