<section class="circles-wrap">
<div class="circles">
<div class="block-circle">
<div class="circle">
<img src="https://i.dlpng.com/static/png/7021522_preview.png" alt=""/>
</div>
</div>
<div class="block-circle">
<div class="circle">
<img src="https://i.dlpng.com/static/png/7021522_preview.png" alt=""/>
</div>
</div>
<div class="block-circle">
<div class="circle">
<img src="https://i.dlpng.com/static/png/7021522_preview.png" alt=""/>
</div>
</div>
<div class="block-circle">
<div class="circle">
<img src="https://i.dlpng.com/static/png/7021522_preview.png" alt=""/>
</div>
</div>
<div class="block-circle">
<div class="circle">
<img src="https://i.dlpng.com/static/png/7021522_preview.png" alt=""/>
</div>
</div>
<div class="block-circle">
<div class="circle">
<img src="https://i.dlpng.com/static/png/7021522_preview.png" alt=""/>
</div>
</div>
<div class="block-circle">
<div class="circle">
<img src="https://i.dlpng.com/static/png/7021522_preview.png" alt=""/>
</div>
</div>
<div class="block-circle">
<div class="circle">
<img src="https://i.dlpng.com/static/png/7021522_preview.png" alt=""/>
</div>
</div>
<div class="block-circle">
<div class="circle">
<img src="https://i.dlpng.com/static/png/7021522_preview.png" alt=""/>
</div>
</div>
<div class="block-circle">
<div class="circle">
<img src="https://i.dlpng.com/static/png/7021522_preview.png" alt=""/>
</div>
</div>
</div>
</section>
*{
margin: 0;
}
body {
overflow-x: hidden;
}
img {
max-width: 100%;
width: 100%
}
.circles-wrap {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: black
}
.circles {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 600px;
height: 600px;
animation-name: rotation;
animation-duration: 60s;
animation-iteration-count: infinite;
animation-timing-function: linear;
z-index: 2
}
.block-circle {
transform-origin: 100% 26px;
transform: rotate(0deg);
position: absolute;
width: 300px;
height: 70px;
bottom: 0;
top: 0;
left: 0;
margin: auto
}
.block-circle .circle {
background: yellow;
border: 1px solid black;
width: 70px;
height: 70px;
border-radius: 50%;
}
.block-circle .circle{
animation-name: circle;
animation-duration: 60s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.block-circle:nth-child(1) img{
transform:rotate(0deg);
}
.block-circle:nth-child(2) img{
transform:rotate(324deg);
}
.block-circle:nth-child(3) img{
transform:rotate(288deg);
}
.block-circle:nth-child(4) img{
transform:rotate(252deg);
}
.block-circle:nth-child(5) img{
transform:rotate(216deg);
}
.block-circle:nth-child(6) img{
transform:rotate(180deg);
}
.block-circle:nth-child(7) img{
transform:rotate(144deg);
}
.block-circle:nth-child(8) img{
transform:rotate(108deg);
}
.block-circle:nth-child(9) img{
transform:rotate(72deg);
}
.block-circle:nth-child(10) img{
transform:rotate(36deg);
}
.block-circle:nth-child(1) {
transform: rotate(0deg);
}
.block-circle:nth-child(2) {
transform: rotate(36deg);
}
.block-circle:nth-child(3) {
transform: rotate(72deg);
}
.block-circle:nth-child(4) {
transform: rotate(108deg);
}
.block-circle:nth-child(5) {
transform: rotate(144deg);
}
.block-circle:nth-child(6) {
transform: rotate(180deg);
}
.block-circle:nth-child(7) {
transform: rotate(216deg);
}
.block-circle:nth-child(8) {
transform: rotate(252deg);
}
.block-circle:nth-child(9) {
transform: rotate(288deg);
}
.block-circle:nth-child(10) {
transform: rotate(324deg);
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes circle {
to {
transform: rotate(-360deg);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.