ソースコード表示
HTML
<div class="s-a2-1">
<div class="s-a2-2"></div>
</div>
CSS
.s-a2-1 {
display: flex;
height: 200px;
justify-content: center;
align-items: center;
margin: 0;
}
@keyframes s-a2-key {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.s-a2-2 {
width: 30px;
height: 30px;
border-radius: 50%;
box-shadow:
0 -60px 0 #eee, /* 上 */
42px -42px 0 #ddd, /* 右上 */
60px 0 0 #ccc, /* 右 */
42px 42px 0 #bbb, /* 右下 */
0 60px 0 #aaa, /* 下 */
-42px 42px 0 #999, /* 左下 */
-60px 0 0 #666, /* 左 */
-42px -42px 0 #000; /* 左上 */
animation-name: s-a2-key;
animation-duration: 1s;
animation-timing-function: steps(8);
animation-iteration-count: infinite;
}