Master Frontend to Backend https://bit.ly/frontend-to-backend-ebook —————— Revolutionize projects with our advanced …
source
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>2024 | Happy New Year</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="text" style="--j:0;">
<span style="--i:0;">2</span>
<span style="--i:1;">3</span>
<span style="--i:2;">4</span>
<span style="--i:3;">5</span>
</div>
<div class="text" style="--j:1;">
<span style="--i:0;">0</span>
<span style="--i:1;">1</span>
<span style="--i:2;">2</span>
<span style="--i:3;">3</span>
</div>
<div class="text" style="--j:2;">
<span style="--i:0;">2</span>
<span style="--i:1;">3</span>
<span style="--i:2;">4</span>
<span style="--i:3;">5</span>
</div>
<div class="text" style="--j:3;">
<span style="--i:0;">3</span>
<span style="--i:1;">4</span>
<span style="--i:2;">3</span>
<span style="--i:3;">4</span>
</div>
</div>
<h2>Happy New Year</h2>
<div class="glowing">
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
</div>
<div class="glowing">
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
</div>
<div class="glowing">
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
</div>
<div class="glowing">
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
</div>
<script>
let h2 = document.querySelector('h2');
let container = document.querySelector('.container');
h2.onclick = function(){
container.classList.toggle('newYear');
this.classList.toggle('active')
}
</script>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Oswald', sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #3d3d3d;
transform-origin: bottom;
overflow: hidden;
}
.container
{
position: absolute;
display: flex;
transform-style: preserve-3d;
transform: rotateY(30deg) rotateX(10deg);
gap: 10px;
}
.text
{
position: relative;
width: 100px;
height: 100px;
transform-style: preserve-3d;
transition: 2.5s ease-in-out;
transition-delay: calc(0.25s * var(--j));
}
.container.newYear .text
{
transform: rotateX(calc(-360deg * 1));
}
.container.newYear .text:last-child
{
transform: rotateX(calc(630deg * 1));
}
.text span
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 4em;
cursor: default;
background: linear-gradient(#434343,#535353);
transform-style: preserve-3d;
transform: rotateX(calc(90deg * var(--i))) translateZ(50px);
}
.text::before
{
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #373737;
transform-origin: left;
transform: rotateY(90deg) translateX(-50px);
}
.text:last-child span
{
background: linear-gradient(#29c040,#32ed4e);
color: #fff;
}
.text:last-child::before
{
background: #11a728;
}
h2
{
position: absolute;
bottom: 50px;
color: #252525;
font-size: 2em;
transition: 0.5s;
cursor: pointer;
}
h2.active
{
color: #fff;
text-shadow: 0 0 20px #fff,
0 0 50px #fff;
}
h2:after
{
content: ' 2024';
transition: 0.5s;
}
h2.active:after
{
color: #32ed4e;
text-shadow: 0 0 20px #32ed4e,
0 0 50px #32ed4e;
}
.glowing
{
position: relative;
min-width: 750px;
height: 750px;
animation: colorChange 5s linear infinite;
transform-origin: right;
margin: -150px;
pointer-events: none;
}
.glowing:nth-child(even)
{
transform-origin: left;
}
@keyframes colorChange
{
0%
{
filter: hue-rotate(0deg);
transform: rotate(0deg);
}
100%
{
filter: hue-rotate(360deg);
transform: rotate(360deg);
}
}
.glowing span
{
position: absolute;
top: calc(80px * var(--i));
left: calc(80px * var(--i));
bottom: calc(80px * var(--i));
right: calc(80px * var(--i));
border-radius: 50%;
box-sizing: border-box;
}
.glowing span:before
{
content: '';
position: absolute;
top: 50%;
left: -8px;
width: 15px;
height: 15px;
background: #f00;
border-radius: 50%;
}
.glowing span:nth-child(3n + 1)
{
animation: animate 10s alternate infinite;
}
.glowing span:nth-child(3n + 2)
{
animation: animate-reverse 3s alternate infinite;
}
.glowing span:nth-child(3n + 3)
{
animation: animate 8s alternate infinite;
}
.glowing span:nth-child(3n + 1):before
{
background: rgba(134,255,0,1);
box-shadow: 0 0 20px rgba(134,255,0,1),
0 0 40px rgba(134,255,0,1),
0 0 60px rgba(134,255,0,1),
0 0 80px rgba(134,255,0,1),
0 0 0 4px rgba(134,255,0,.1);
}
.glowing span:nth-child(3n + 2):before
{
background: rgba(255,214,0,1);
box-shadow: 0 0 20px rgba(255,214,0,1),
0 0 40px rgba(255,214,0,1),
0 0 60px rgba(255,214,0,1),
0 0 80px rgba(255,214,0,1),
0 0 0 8px rgba(255,214,0,.1);
}
.glowing span:nth-child(3n + 3):before
{
background: rgba(0,226,255,1);
box-shadow: 0 0 20px rgba(0,226,255,1),
0 0 40px rgba(0,226,255,1),
0 0 60px rgba(0,226,255,1),
0 0 80px rgba(0,226,255,1),
0 0 0 4px rgba(0,226,255,.1);
}
@keyframes animate
{
0%
{
transform: rotate(0deg);
}
100%
{
transform: rotate(360deg);
}
}
@keyframes animate-reverse
{
0%
{
transform: rotate(360deg);
}
100%
{
transform: rotate(0deg);
}
}
