<div class="circle1"></div>
.circle1 {
position: absolute;
top: 80px;
left: 50px;
width: 100px;
height: 100px;
background-color: #f756c4;
border-radius: 100px;
animation: swing linear 5s infinite;
transform-origin: center -50px 0;
}
.circle1::before {
position: absolute;
top: -70px;
left: 50px;
content: "";
border-right: 1px solid #000;
height: 70px;
}
@keyframes swing {
0% { transform: rotate(0deg); }
25% { transform: rotate(10deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(-10deg); }
100% { transform: rotate(0deg); }
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.