Infinity Well Which take You to The CodinGyan
 |
Source Code Of Infinity Well
<!DOCTYPE html>
<html>
<head>
<title>Solo addict</title>
<link href="https://fonts.googleapis.com/css?family=Monoton&display=swap" rel="stylesheet">
</head>
<body>
<style>
body {
background-color:#000;
overflow:hidden
}
.ctr{
position:absolute;
margin:auto;
right:0;top:0;left:0;bottom:0;
}
.cont{
transform-style: preserve-3d;
perspective: 1000px;
}
.bkCircle{
width:100px;
height:100px;
border-radius:50%;
box-shadow: inset 0 0 20px #0B2161, 0 0 20px #fff;
opacity:0;
}
.end{
width:200px;
height:200px;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
color:transparent;
font-size:3em;
font-family: 'Monoton', cursive;
letter-spacing:10px;
}
#addict{
animation: move2 1s linear infinite;
}
@keyframes move{
100%{transform:translateZ(1100px);opacity:1;}
}
@keyframes move2{
45%{opacity:1}
50%{opacity:0}
55%{opacity:1}
70%{opacity:0}
}
</style>
<script>
window.onload = function() {
let nbr = 40;
for(let i=0; i<nbr;i++){
let out = document.getElementsByClassName('cont')[0];
let newDiv = document.createElement("div");
newDiv.setAttribute('class', 'ctr bkCircle');
newDiv.style.transform ="translateZ(-"+i*10+"px)";
newDiv.style.animation ="move 3s linear";
newDiv.style.animationDelay = i/6 + "s";
if(i===nbr-1){
newDiv.style.background = "white";
}
out.appendChild(newDiv);
}
}
function end(){
document.getElementsByClassName('end')[0].style.color = "red";
}window.setTimeout(end,9700);
</script>
<div class="ctr cont">
</div>
<div class="ctr end">
<span id="addict">Coding<br>Gyan</span>
</div>
</body>
</html>
|
Enjoy the Effect 👍👍👍
Thanks
Infinity Well
Reviewed by Shaishav Anand
on
July 24, 2019
Rating:
Reviewed by Shaishav Anand
on
July 24, 2019
Rating:
No comments: