Follow us on instagram: https://www.instagram.com/webstreet_code/
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Glowing Text Ring</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #0d0d0d;
margin: 0;
background: linear-gradient(135deg, #1e3c72, #2a5298, #1e3c72, #2a5298);
overflow: hidden;
font-family: Arial, sans-serif;
animation: bgAnimation 10s ease-in-out infinite;
}
@keyframes bgAnimation {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.ring {
position: relative;
width: 600px;
height: 600px;
animation: rotateY 15s linear infinite;
transform-style: preserve-3d;
perspective: 800px;
}
.ring span {
position: absolute;
top: 50%;
left: 50%;
font-size: 150px;
font-weight: bold;
color: #ffffff;
transform-origin: center;
transform: translate(-50%, -50%);
text-shadow: 0 0 8px rgba(255, 110, 199, 0.8), 0 0 15px rgba(255, 110, 199, 0.6), 0 0 25px rgba(255, 110, 199, 0.5);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* Position each letter in a circular arrangement along the Y-axis */
.ring span:nth-child(1) { transform: rotateY(0deg) translateZ(150px); }
.ring span:nth-child(2) { transform: rotateY(60deg) translateZ(150px); }
.ring span:nth-child(3) { transform: rotateY(120deg) translateZ(150px); }
.ring span:nth-child(4) { transform: rotateY(180deg) translateZ(150px); }
.ring span:nth-child(5) { transform: rotateY(240deg) translateZ(150px); }
.ring span:nth-child(6) { transform: rotateY(300deg) translateZ(150px); }
/* Rotate animation on the Y-axis only */
@keyframes rotateY {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="ring">
<span>P</span>
<span>R</span>
<span>I</span>
<span>N</span>
<span>C</span>
<span>E</span>
</div>
</body>
</html>
Top comments (0)