Source code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Spiral Illusion</title>
<style>
body{
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: radial-gradient(circle, #000428, #004e92);
overflow: hidden;
}
.spiral{
position: relative;
width:200px;
height: 200px;
animation: rotate 8s linear infinite;
}
.spiral div{
position: absolute;
width: 100%;
height: 100%;
border:8px solid transparent;
border-top: 8px solid #ff5733;
border-radius: 50%;
animation: spin 3s linear infinite;
}
.spiral div:nth-child(1){
border-top-color: #ff5733;
animation-delay: 0s;
transform: rotate(0deg) scale(1);
}
.spiral div:nth-child(2){
border-top-color: #33ff57;
animation-delay: -1s;
transform: rotate(30deg) scale(0.85);
}
.spiral div:nth-child(3){
border-top-color: #5733ff;
animation-delay: -2s;
transform: rotate(60deg) scale(0.7);
}
.spiral div:nth-child(4){
border-top-color: #33faff;
animation-delay: -3s;
transform: rotate(90deg) scale(0.55);
}
@keyframes spin{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
@keyframes rotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(-360deg);
}
}
</style>
</head>
<body>
<div class=”spiral”>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
