Circle With Point

css animation demo

by ipoly

HTML

<div class="center">
    <div class="point"></div>
    <div class="circle"></div>
</div>

CSS

.center {
    width:0;
    height:0;
    border:1px solid green;
    position: absolute;
    left: 100px;
    top: 100px;
    overflow: visible;
}
.circle {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50px;
    margin: -51px;
    border: 1px solid skyblue;
}
.point {
    position: absolute;
    left: -50px;
    top: 0;
    width: 10px;
    height: 10px;
    background:red;
    -webkit-border-radius: 5px;
    -webkit-transform-origin: 50px 0;
    -webkit-animation: circle 2s linear 0 infinite;
       
}
@-webkit-keyframes circle{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}