console
<div class="icon-large icon-setting">
<div class="bg">
<div class="gear-s">
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
</div>
<div class="gear-b">
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="teeth"></div>
<div class="origin">
<div class="stick"></div>
<div class="stick"></div>
<div class="stick"></div>
</div>
</div>
</div>
</div>
@mixin centerer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@mixin has-child {
&:before, &:after {
content: "";
display: block;
position: absolute;
}
}
html, body {
height: 100%;
background: #fff;
position: relative;
}
.icon-large {
width: 220px;
height: 220px;
border-radius: 38px;
@include centerer;
}
.icon-setting{
background:linear-gradient(to bottom,#dcdcdc ,#8c8c8c )
}
.bg{
width:192px;
height:192px;
background:linear-gradient(to bottom,#222,#545454) ;
border-radius:50%;
@include centerer;
}
@keyframes gear-rotate{
0%{
transform:translate(-50%,-50%) rotate(0);
}
100%{
transform:translate(-50%,-50%) rotate(230deg);
}
}
.gear-s{
width:84px;
height:84px;
border-radius:50%;
border:10px solid #b5b7ba ;
box-shadow:inset 0 0 15px 5px rgba(0,0,0,.3),0 0 5px 5px rgba(0,0,0,.5);
@include centerer;
animation:gear-rotate 8s linear infinite alternate;
.teeth{
width:3px;
height:10px;
background:#b5b7ba;
border-radius:50% 50% 0 0/100% 100%;
@include centerer;
}
@for $i from 0 to 60{
.teeth:nth-child(#{$i+1}){
transform:translate(-50%,-50%) rotate(#{6deg * $i}) translate(0,-54px);
}
}
}
.gear-b{
width:138px;
height:138px;
border-radius:50%;
border:8px solid #c3c4c7 ;
box-shadow:inset 0 0 15px 5px rgba(0,0,0,.3),0 0 20px 0px rgba(0,0,0,.5);
@include centerer;
animation:gear-rotate 4s linear infinite alternate;
.teeth{
width:4px;
height:10px;
background:#c3c4c7 ;
border-radius:50% 50% 0 0/100% 100%;
@include centerer;
}
@for $i from 0 to 60{
.teeth:nth-child(#{$i+1}){
transform:translate(-50%,-50%) rotate(#{6deg * $i}) translate(0,-82px);
}
}
}
.origin{
width:8px;
height:8px;
border-radius:50%;
border:3px solid #c3c4c7;
box-shadow:0 0 5px 3px rgba(0,0,0,.5);
@include centerer;
}
.stick{
height:67px;
width:8px;
background:#c3c4c7 ;
box-shadow:5px 0 3px -3px rgba(0,0,0,.5),-5px 0 3px -3px rgba(0,0,0,.5);
@include centerer;
@include has-child;
&:before{
width:0;
height:0;
border-style:solid;
border-width: 0 10px 12px;
border-color:transparent transparent #c3c4c7 ;
position:absolute;
bottom:2px;
right:-6px;
}
&:after{
width:0;
height:0;
border-style:solid;
border-width: 0 20px 6px;
border-color:transparent transparent #c3c4c7 ;
position:absolute;
bottom:2px;
right:-16px;
}
}
@for $j from 0 to 3{
.stick:nth-child(#{$j+1}){
transform:translate(-50%,-50%) rotate(#{120deg*$j}) translate(0,38px);
}
}