On the code:
------------------------------------------------------------
<body>
<div class="div"></div>
<style>
body {
background-color: #aaa;
}
.div {
width: 400px;
height: 400px;
border-radius: 50%;
border: 1px solid #ddd;
background-image:
radial-gradient(50% 50% at 50% 25%, #000 10%, transparent 0),
radial-gradient(50% 50% at 50% 75%, #fff 10%, transparent 0),
radial-gradient(50% 50% at 50% 25%, #fff 50%, transparent 0), radial-gradient(50% 50% at 50% 75%, #000 50%, transparent 0),
linear-gradient(to left, #fff 50%, #000 50%);
animation: rotate 3s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
}
</style>
</body>
Just started writing articles in the official blog garden, a lot of things are to explore, question and then slowly back style modification, 0.0