Ambient light effect cube with text USING html css in hindi
Ambient light effect cube with text USING #html #css in hindi with free source code
FULL VIDEO ON YOUTUBE- VISIT CHANNEL
.png)
.png)
CSS CODE
SAVE AS- STYLE.CSS
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;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: #050505;
}
.cube
{
position: relative;
width: 300px;
height: 300px;
transform-style: preserve-3d;
animation: animate 4s linear infinite;
}
@keyframes animate
{
0%
{
transform: rotateX(-30deg) rotateY(0deg)
}
100%
{
transform: rotateX(-30deg) rotateY(360deg)
}
}
.cube div
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.cube div span
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(hsla(54, 100%, 50%, 0.979),#01ff01);
transform: rotateY(calc(90deg * var(--i))) translateZ(150px); /* 300 / 2 = 150*/;
display: flex;
justify-content: center;
align-items: center;
transform-style: preserve-3d;
}
.cube div span h2
{
position: absolute;
font-size: 05em;
color: rgb(0, 17, 255);
transform: translateZ(50px);
}
.top
{
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background: rgb(196, 22, 138);
transform: rotateX(90deg) translateZ(150px);
}
.top::before
{
content:'';
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background: rgb(23, 211, 23);
transform: translateZ(-380px);
filter: blur(20px);
box-shadow: 0 0 120px rgba(0,255,0,0.2),
0 0 200px rgba(0,255,0,0.4),
0 0 300px rgba(0,255,0,0.6),
0 0 400px rgba(0,255,0,0.8),
0 0 500px rgba(0,255,0,1);
}
HTML CODE
SAVE AS- INDEX.HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ambient light effect | cube with text</title>
<link rel="stylesheet" href="style.css">
<!---made by gaurav tripathi-->
</head>
<body>
<div class="cube">
<div class="top"></div>
<div>
<span style="--i:0;">
<h2> I AM GAURAV </h2>
<h2> I AM GAURAV </h2>
</span>
<span style="--i:1;">
<h2></h2>
<h2></h2>
</span>
<span style="--i:2;">
<h2>WEB DEVELOPER</h2>
<h2>WEB DEVELOPER</h2>
</span>
<span style="--i:3;">
<h2></h2>
<h2></h2>
</span>
</div>
</div>
</body>
</html>
Comments
Post a Comment