FOLLOW US ON THE INSTAGRAM: https://www.instagram.com/prince_codes1/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Illusion Pattern</title>
<style>
body {
margin: 0;
background: radial-gradient(circle, #1a1a1a,
#000000);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
.illusion {
position: relative;
width: 450px;
height: 450px;
background: radial-gradient(circle,
transparent 20%, #ffffff 20%, #ffffff 40%,
transparent 40%, transparent 60%, #ffffff 60%,
#ffffff 80%, transparent 80%);
background-size: 50px 50px;
animation: rotate 4s linear infinite;
border-radius: 50%;
}
.illusion::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: radial-gradient(circle, transparent 15%,
#ffffff 15%, #ffffff 35%, transparent 35%,
transparent 55%, #ffffff 55%, #ffffff 75%,
transparent 75%);
background-size: 50px 50px;
animation: counter-rotate 4s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes counter-rotate {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
</style>
</head>
<body>
<div class="illusion"></div>
</body>
</html>
Top comments (0)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.