円の周りを周回する線を作成する

Question

円の周りを数行回転するアニメーションを作成しようとしています。この

http://prntscr.com/dxoe8o

よう

何かが、これは私の試みは1行だけですが、私はいくつかを作成したいと思い、私のhtml & CSS

.outCircle { 
 
    width: 20px; 
 
    height: 20px; 
 
    background-color: lightblue; 
 
    left: 270px; 
 
    position: absolute; 
 
    top: 50px; 
 
    -moz-border-radius: 100px; 
 
    -webkit-border-radius: 100px; 
 
    border-radius: 100px; 
 
} 
 
.duringTen { 
 
    -webkit-animation-duration: 5s; 
 
} 
 
.infinite { 
 
    -webkit-animation-iteration-count: infinite; 
 
} 
 
.linear { 
 
    -webkit-animation-timing-function: linear; 
 
} 
 
.counter { 
 
    width: 30px; 
 
    height: 30px; 
 
    -webkit-animation-duration: inherit; 
 
    -webkit-animation-direction: reverse; 
 
    -webkit-animation-timing-function: inherit; 
 
    -webkit-animation-iteration-count: inherit; 
 
    -webkit-animation-name: inherit; 
 
} 
 
.rotate { 
 
    width: 100%; 
 
    height: 100%; 
 
    -webkit-animation-name: circle; 
 
    position: relative; 
 
    z-index: 10; 
 
    display: block; 
 
} 
 
.inner { 
 
    width: 20px; 
 
    height: 2px; 
 
    -moz-border-radius: 50px; 
 
    -webkit-border-radius: 50px; 
 
    border-radius: 100px; 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 5px; 
 
    background-color: red; 
 
    display: block; 
 
} 
 
.red { 
 
    background: red; 
 
} 
 
.green { 
 
    background: green; 
 
} 
 
@keyframes circle { 
 
    from { 
 
    -webkit-transform: rotateZ(0deg) 
 
    } 
 
    to { 
 
    -webkit-transform: rotateZ(360deg) 
 
    } 
 
}

<div class="outCircle"> 
 
    <div class="rotate linear infinite duringTen"> 
 
    <div class="counter"> 
 
     <div class="inner"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

です上に掲示した写真のようなもっと多くの行。 これは、私の知る限りは、おそらく

Answer 1

このような何か来ているとされています

.outCircle { 
 
    width: 20px; 
 
    height: 20px; 
 
    background-color: lightblue; 
 
    position: relative; 
 
    border-radius: 50%; 
 
    margin: 100px auto; 
 
} 
 
.marker { 
 
    width: 50px; 
 
    height: 2px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    background: linear-gradient(to right, black, black 25%, transparent 25%, transparent 75%, black 75%); 
 
    transform: translate(-50%, -50%); 
 
} 
 
.vert { 
 
    width: 2px; 
 
    height: 50px; 
 
    background: linear-gradient(to bottom, black, black 25%, transparent 25%, transparent 75%, red 75%); 
 
    transform: translate(-50%, -50%); 
 
} 
 
.angle-1 { 
 
    transform: translate(-50%, -50%) rotate(45deg); 
 
} 
 
.angle-2 { 
 
    transform: translate(-50%, -50%) rotate(-45deg); 
 
} 
 
.inner { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    animation: circle 3s linear infinite; 
 
} 
 
@keyframes circle { 
 
    from { 
 
    transform: rotateZ(0deg); 
 
    } 
 
    to { 
 
    transform: rotateZ(360deg); 
 
    } 
 
}

<div class="outCircle"> 
 
    <div class="inner"> 
 
    <div class="marker horiz"></div> 
 
    <div class="marker vert"></div> 
 
    <div class="marker angle-1"></div> 
 
    <div class="marker angle-2"></div> 
 
    </div> 
 
</div>

注意、これは簡単にすることができ少しの時間で...迅速かつ汚れています、おそらくいくつかのマーカーに擬似要素を使用することによって可能になります。

しかし、一般的にSVGが良いかもしれません。