Happy Republic Day Wish Using HTML and CSS, 26 January wish using HTML/CSS
<!-- WELCOME ALL OF YOU ON COMPUTER SOFT SKILLS CHANNEL ------>
<!-- 26 January Republic Day Wish Using HTML/CSS ------>
<!DOCTYPE html>
<html>
<head>
<title>Happy Republic Day</title><style>
*{
margin:0;
padding:0;
font-family:"Montserrat",sans-serif;
box-sizing: border-box;
}
body{
height: 100vh;
background: linear-gradient(160deg,darkorange 5%,white 20%, white 80%, lawngreen 100%);
display:flex;
justify-content:center;
align-items:center;
flex-direction: column;
overflow:hidden;
}
.chakra{
position: relative;
width:250px;
height: 250px;
color: blue;
border: 10px solid currentcolor;
border-radius: 50%;
transform:rotateY(180deg);
animation: outer .5s cubic-bezier(0.25, 1, 0.7, 1.35), rotate 35s linear infinite 5s;
}
.chakra .spikes,
.chakra .spikes .spike{
position: absolute;
top: 0;
left:0;
width: 100%;
height: 100%;
pointer-events: none;
}
.chakra .spikes .spike{
transform:rotate(calc(15deg * var(--i)));
}
.chakra .spikes .spike::before{
content:"";
position: absolute;
width: 16px;
height:16px;
background: currentcolor;
border-radius:50%;
top: -8px;
left: calc(50% - 8px);
animation: circle 2s linear calc(-0.05s * var(--i));
}
.chakra .spikes .spike::after{
content:"";
position: absolute;
width: 10px;
height:50%;
background: currentcolor;
top: -8px;
left: calc(50% - 5px);
transform-origin: bottom;
transform: rotate(7.5deg);
clip-path:polygon(50% 5%, 100% 50%, 50% 95%, 0% 50%);
animation: spike 4s linear calc(-0.05s * var(--i))
}
.chakra::after{
content:"";
position: absolute;
width: 25px;
height:25px;
background: currentcolor;
border-radius:50%;
top: calc(50% - 12px);
left:calc(50% - 12px);
animation: inner 2s cubic-bezier(0.25, 1, 0.7, 1.35)
}
h1{
font-size: 45px;
color: red;
text-transform: uppercase;
margin-top: 25px;
display: flex;
gap: 25px;
font-weight: 600;
overflow: hidden;
}
h1 span{
animation: text 5s ease calc(-0.3s * var(--i))
}
h2{
font-size: 80px;
font-weight: 700;
color: Green;
animation: text 5s ease-in-out;
}
@keyframes outer{
0%{
transform: rotateY(180deg) scale(0);
}
}
@keyframes rotate{
to{transform: rotateY(180deg) rotate(-360deg)
}
}
@keyframes inner{
0%, 75%{
transform: scale(0);
}
}
@keyframes circle{
0%,90%{
opacity: 0;
}
}
@keyframes spike{
0%, 90%{
opacity: 0;
clip-path: polygon(50% 90%, 100% 90%, 90% 95%, 0 50%)
}
}
@keyframes text{
0%,80%{
opacity: 0;
transform: translateY(100%)
}
}
</style>
</head>
<body>
<div class="chakra">
<div class="spikes">
<div class="spike" style="--i: 1"></div>
<div class="spike" style="--i: 2"></div>
<div class="spike" style="--i: 3"></div>
<div class="spike" style="--i: 4"></div>
<div class="spike" style="--i: 5"></div>
<div class="spike" style="--i: 6"></div>
<div class="spike" style="--i: 7"></div>
<div class="spike" style="--i: 8"></div>
<div class="spike" style="--i: 9"></div>
<div class="spike" style="--i: 10"></div>
<div class="spike" style="--i: 11"></div>
<div class="spike" style="--i: 12"></div>
<div class="spike" style="--i: 13"></div>
<div class="spike" style="--i: 14"></div>
<div class="spike" style="--i: 15"></div>
<div class="spike" style="--i: 16"></div>
<div class="spike" style="--i: 17"></div>
<div class="spike" style="--i: 18"></div>
<div class="spike" style="--i: 19"></div>
<div class="spike" style="--i: 20"></div>
<div class="spike" style="--i: 21"></div>
<div class="spike" style="--i: 22"></div>
<div class="spike" style="--i: 23"></div>
<div class="spike" style="--i: 24"></div>
</div>
</div>
<h1>
<span style="--i: 3">Happy</span>
<span style="--i: 2">Republic</span>
<span style="--i: 1">Day</span>
</h1>
<br>
<h2>
<span style="--i: 1">2026</span>
</h2>
</body>
</html>
No comments:
Post a Comment