ZbKwdy

index.html

<div id="box"><div id="point"></div></div>

style.css

$boxRadius: 300px !default;
$pointRadius: 14px !default;
$boxSize: $boxRadius * 2 !default;
$pointSize: $pointRadius * 2 !default;
$center: (
  x: $boxRadius - $pointRadius,
  y: $boxRadius - $pointRadius
);
$derection: 1; // 1 is clockwise, -1 is anticlockwise
$PI: 3.14 !default;
$durationTime: 2 !default; // unit is second
$speed: 2 * $PI / $durationTime !default;
@mixin getPointPosition($degree: 0){
  top: map-get($center, y) +  sin($degree) * $boxRadius; 
  left: map-get($center, x) +  cos($degree) * $boxRadius; 
}
body{
  margin:0;
  padding:0;
}
#box{
  width:$boxSize;
  height:$boxSize;
  border-radius:50%;
  box-sizing:border-box;
  border:1px solid #333;
  margin:20px;
  position: relative;
}
#point{
  position: absolute;
  width:$pointSize;
  height:$pointSize;
  background-color:#aae;
  border-radius:50%;
  border:1px solid #ddd;
  @include getPointPosition(0);
  animation: 'point-run' ($durationTime * 1s) 1;
}

@keyframes 'point-run'{
  @for $i from 0 through 100 {
    $percent: 0% + $i;
    #{$percent} {
      @include getPointPosition($derection * $i * $durationTime *  $speed / 100); 
      
    }
  }
}

ZbKwdy.markdown

ZbKwdy

A Pen by imjiangtao on CodePen.

License.