CSS Only Animation: วาดวงกลมด้วย Border-Radius และ Transparent Background

Pure CSS Animated Circle Drawing

ใช้ Border, Border-Radius, Transform และ Keyframes Animation

CSS สำคัญ

#box {
    position: absolute;
    width: 400px; height: 400px;
    border: solid blue 2px;
    animation: colors 5s infinite;
}

.circlehalf {
    box-sizing: border-box;
    width: 200px; height: 400px;
    position: absolute; right: 0;
    border: solid 20px transparent;
    border-top-color: blue;
    border-left-color: blue;
    border-radius: 50%;
}

#clipped {
    width: 400px;
    animation: rotate 8s linear infinite;
}

@keyframes rotate {
    0% { transform: rotate(-45deg); }
    100% { transform: rotate(135deg); }
}

@keyframes cliprotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

HTML Structure

<div id="box">
  <div id="demo">
    <div class="circlehalf" id="clipped"></div>
  </div>
  <div class="circlehalf" id="fixed"></div>
</div>

หลักการ: วาดครึ่งวงกลม 2 ชิ้น หมุนทับกัน สร้าง Animation วาดวงกลม