Hello, Friend Finally we made the 5th stone of Avenger which is The Time Stone. As you see in our shorts and video. The Code of the entire program is here and you have the brand new stone of avenger that is The Time stone.
When you create it stay alert from THANOS and protect the time stone so you can save the Universe
For Output check-out our YouTube -RED CODE
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated box rotate by css only</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #050505;
}
.cube{
position: absolute;
width: 300px;
height: 300px;
transform-style: preserve-3d;
transform: rotateX(-30deg);
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(#151515,#00ec00);
transform: rotateY(calc(90deg*var(--i))) translateZ(150px);
}
.top{
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background: #222;
transform: rotateX(90deg) translateZ(150px);
}
.top::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background: #0f0;
transform: translateZ(-400px);
filter: blur(20px);
box-shadow: 0 0 120px rgba(0, 255, 0, 0.2),
0 0 200px rgba(0, 225, 0,0.4),
0 0 300px rgba(0, 225, 0,0.6),
0 0 400px rgba(0, 225, 0,0.8),
0 0 500px rgba(0, 225, 0,1);
}
</style>
</head>
<body>
<div class="cube">
<div class="top"></div>
<div>
<span style="--i:0"></span>
<span style="--i:1"></span>
<span style="--i:2"></span>
<span style="--i:3"></span>
<!-- <span style="--i:0"></span> -->
</div>
</div>
</body>
</html>
1 Comments
Nice code ✌️✌️👍👍
ReplyDeleteThanks for comment ! we get touch with you soon.