Cool Square illusion
Copy Code from down and Impress your friends with these code.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<style>
{
background: black;
height: 100%;
position: relative;
overflow: hidden;
}
.container{
height: 300px;
width: 300px;
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
}
height: 300px;
width: 300px;
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
}
.square{
height: 94%;
width: 94%;
background: white;
position: absolute;
top: 50%;
left: 50%;
margin: -47% 0 0 -47%;
}
height: 94%;
width: 94%;
background: white;
position: absolute;
top: 50%;
left: 50%;
margin: -47% 0 0 -47%;
}
.black{
background: black;
animation: rotate 10s infinite linear;
}
background: black;
animation: rotate 10s infinite linear;
}
@keyframes rotate{
0%{ transform: rotate(0deg); }
100%{ transform: rotate(360deg); }
}
</style>
<body>
<div class="container">
<div class="square black">
<div class="square">
<div class="square black">
<div class="square">
<div class="square black">
<div class="square">
<div class="square black">
<div class="square">
<div class="square black">
<div class="square">
<div class="square black">
<div class="square">
<div class="square black">
<div class="square">
<div class="square black">
<div class="square">
<div class="square black">
<div class="square">
<div class="square black">
<div class="square">
<div class="square black">
<div class="square">
<div class="square black">
<div class="square">
<div class="square black">
<div class="square">
<div class="square black">
<div class="square">
<div class="square black">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
0%{ transform: rotate(0deg); }
100%{ transform: rotate(360deg); }
}
</style>
<body>
<div class="container">
<div class="square black">
<div class="square">
<div class="square black">
<div class="square">
<div class="square black">
<div class="square">
<div class="square black">
<div class="square">
<div class="square black">
<div class="square">
<div class="square black">
<div class="square">
<div class="square black">
<div class="square">
<div class="square black">
<div class="square">
<div class="square black">
<div class="square">
<div class="square black">
<div class="square">
<div class="square black">
<div class="square">
<div class="square black">
<div class="square">
<div class="square black">
<div class="square">
<div class="square black">
<div class="square">
<div class="square black">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Thanks
Code for Square Illusion
Reviewed by Shaishav Anand
on
July 28, 2019
Rating:
Reviewed by Shaishav Anand
on
July 28, 2019
Rating:
Awesome!
ReplyDeleteThanks Buddy means alot...you can look some more interesting articles by us.
Delete