<div class="yoko">
<div class="kaiten">
<div class="move">
<div class="kaiten-follow">
<div class="yoko-follow">
<div class="maru"></div>
</div>
</div>
</div>
</div>
<div class="kaiten">
<div class="move">
<div class="kaiten-follow">
<div class="yoko-follow">
<div class="maru"></div>
</div>
</div>
</div>
</div>
<div class="kaiten">
<div class="move">
<div class="kaiten-follow">
<div class="yoko-follow">
<div class="maru"></div>
</div>
</div>
</div>
</div>
</div>
body {
display: box;
display: flex;
box-pack: center;
justify-content: center;
box-align: center;
align-items: center;
height: 100vh;
overflow: hidden;
background: radial-gradient(ellipse at bottom, #fff 40%, #bbc);
perspective: 600px;
perspective: 600px;
}
.maru {
position: relative;
width: 100px;
height: 100px;
background: gradient(linear, left bottom, left top, from(#7c0000), color-stop(#db3e14), color-stop(#db3e14), to(#ff904e));
background: linear-gradient(0deg, #7c0000, #c91000, #db3e14, #ff904e);
border-radius: 100%;
box-shadow: -20px -10px 40px rgba(60, 30, 150, 0.7) inset;
}
.maru::before {
content: '';
position: absolute;
top: 5px;
left: 0;
width: 50px;
height: 30px;
background: rgba(200, 230, 255, 0.5);
border-radius: 100%;
filter: blur(10px);
filter: blur(10px);
}
.maru::after {
content: '';
position: absolute;
z-index: -1;
top: 90px;
width: 100%;
height: 100%;
background: gradient(linear, left bottom, left top, color-stop(50%, rgba(255, 255, 255, 0)), color-stop(rgba(200, 200, 250, 0.3)), to(rgba(100, 100, 150, 0.5)));
background: linear-gradient(0deg, rgba(255, 255, 255, 0) 50%, rgba(200, 200, 250, 0.3), rgba(100, 100, 150, 0.5));
border-radius: 100%;
}
.yoko {
transform-style: preserve-3d;
transform-style: preserve-3d;
transform: rotateX(-25deg);
transform: rotateX(-25deg);
}
.yoko-follow {
transform-style: preserve-3d;
transform-style: preserve-3d;
transform: rotateX(25deg);
transform: rotateX(25deg);
}
.move {
transform-style: preserve-3d;
transform-style: preserve-3d;
transform: translateZ(200px);
transform: translateZ(200px);
}
.kaiten {
position: absolute;
top: -50px;
left: -50px;
transform-style: preserve-3d;
transform-style: preserve-3d;
animation: kaitenY 3000ms linear infinite;
animation: kaitenY 3000ms linear infinite;
}
.kaiten:nth-child(2) {
animation-delay: -300ms;
animation-delay: -300ms;
}
.kaiten:nth-child(2) .kaiten-follow {
animation-delay: -300ms;
animation-delay: -300ms;
}
.kaiten:nth-child(3) {
animation-delay: -600ms;
animation-delay: -600ms;
}
.kaiten:nth-child(3) .kaiten-follow {
animation-delay: -600ms;
animation-delay: -600ms;
}
.kaiten-follow {
transform-style: preserve-3d;
transform-style: preserve-3d;
animation: kaitenY 3000ms linear infinite reverse;
}
@-webkit-keyframes kaitenY {
0% {
transform: rotateY(0deg);
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
@keyframes kaitenY {
0% {
transform: rotateY(0deg);
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.