A nice dot spin animation inspired by Z.E.D. (Dribbble)
https://dribbble.com/shots/1663112-Dial-Mother-Ship?list=shots&sort=popular&timeframe=now&offset=98
A Pen by Florian Wirtz on CodePen.
A nice dot spin animation inspired by Z.E.D. (Dribbble)
https://dribbble.com/shots/1663112-Dial-Mother-Ship?list=shots&sort=popular&timeframe=now&offset=98
A Pen by Florian Wirtz on CodePen.
<div class="bg"></div> | |
<div class="content"> | |
<div class="circle no1"> | |
<span class="dot"></span> | |
<span class="dot deg90"></span> | |
</div> | |
<div class="circle no2"> | |
<span class="dot"></span> | |
<span class="dot deg45"></span> | |
<span class="dot deg90"></span> | |
<span class="dot deg135"></span> | |
</div> | |
<div class="circle no3"> | |
<span class="dot"></span> | |
<span class="dot deg30"></span> | |
<span class="dot deg60"></span> | |
<span class="dot deg90"></span> | |
<span class="dot deg120"></span> | |
<span class="dot deg150"></span> | |
</div> | |
<div class="circle no4"> | |
<span class="dot"></span> | |
<span class="dot deg22"></span> | |
<span class="dot deg45"></span> | |
<span class="dot deg67"></span> | |
<span class="dot deg90"></span> | |
<span class="dot deg112"></span> | |
<span class="dot deg135"></span> | |
<span class="dot deg157"></span> | |
</div> | |
<div class="circle no5"> | |
<span class="dot"></span> | |
<span class="dot deg18"></span> | |
<span class="dot deg36"></span> | |
<span class="dot deg54"></span> | |
<span class="dot deg72"></span> | |
<span class="dot deg90"></span> | |
<span class="dot deg108"></span> | |
<span class="dot deg126"></span> | |
<span class="dot deg144"></span> | |
<span class="dot deg162"></span> | |
</div> | |
<div class="circle no6"> | |
<span class="dot"></span> | |
<span class="dot deg15"></span> | |
<span class="dot deg30"></span> | |
<span class="dot deg45"></span> | |
<span class="dot deg60"></span> | |
<span class="dot deg75"></span> | |
<span class="dot deg90"></span> | |
<span class="dot deg105"></span> | |
<span class="dot deg120"></span> | |
<span class="dot deg135"></span> | |
<span class="dot deg150"></span> | |
<span class="dot deg165"></span> | |
</div> | |
<div class="circle no7"> | |
<span class="dot"></span> | |
<span class="dot deg12"></span> | |
<span class="dot deg25"></span> | |
<span class="dot deg38"></span> | |
<span class="dot deg51"></span> | |
<span class="dot deg64"></span> | |
<span class="dot deg77"></span> | |
<span class="dot deg90"></span> | |
<span class="dot deg102"></span> | |
<span class="dot deg115"></span> | |
<span class="dot deg128"></span> | |
<span class="dot deg141"></span> | |
<span class="dot deg154"></span> | |
<span class="dot deg167"></span> | |
</div> | |
<div class="circle no8"> | |
<span class="dot"></span> | |
<span class="dot deg11"></span> | |
<span class="dot deg22"></span> | |
<span class="dot deg33"></span> | |
<span class="dot deg45"></span> | |
<span class="dot deg56"></span> | |
<span class="dot deg67"></span> | |
<span class="dot deg78"></span> | |
<span class="dot deg90"></span> | |
<span class="dot deg101"></span> | |
<span class="dot deg112"></span> | |
<span class="dot deg123"></span> | |
<span class="dot deg135"></span> | |
<span class="dot deg146"></span> | |
<span class="dot deg157"></span> | |
<span class="dot deg168"></span> | |
</div> | |
<div class="circle no9"> | |
<span class="dot"></span> | |
<span class="dot deg10"></span> | |
<span class="dot deg20"></span> | |
<span class="dot deg30"></span> | |
<span class="dot deg40"></span> | |
<span class="dot deg50"></span> | |
<span class="dot deg60"></span> | |
<span class="dot deg70"></span> | |
<span class="dot deg80"></span> | |
<span class="dot deg90"></span> | |
<span class="dot deg100"></span> | |
<span class="dot deg110"></span> | |
<span class="dot deg120"></span> | |
<span class="dot deg130"></span> | |
<span class="dot deg140"></span> | |
<span class="dot deg150"></span> | |
<span class="dot deg160"></span> | |
<span class="dot deg170"></span> | |
</div> | |
<div class="circle no10"></div> | |
</div> |
body { | |
padding:0; | |
margin:0; | |
} | |
.bg { | |
position: absolute; | |
width:100%; | |
height:100%; | |
background-image: url(http://31.media.tumblr.com/e7ac48834604ac8e9aaf4a3c106c4e86/tumblr_n9hxd1c4Y81st5lhmo1_1280.jpg); | |
background-color: #fafafa; | |
background-size: cover; | |
-position: center; | |
-webkit-filter: brightness(1.2); | |
filter: brightness(1.2); | |
} | |
.content { | |
width:100%; | |
height:100%; | |
top:0; | |
right:0; | |
bottom:0; | |
left:0; | |
position:absolute; | |
} | |
.circle { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
border-radius: 50%; | |
background: transparent; | |
z-index: 10; | |
} | |
.circle span.dot { | |
position: absolute; | |
width: 8px; | |
height: 100%; | |
top: 0; | |
left: 50%; | |
margin-left: -4px; | |
} | |
.circle span.dot:after { | |
content: ''; | |
position: absolute; | |
left: 0; | |
top: 0; | |
display: block; | |
width: 8px; | |
height: 8px; | |
background-color: #fafafa; | |
border-radius: 50%; | |
} | |
.circle span.dot:before { | |
content: ''; | |
position: absolute; | |
left: 0; | |
top: 100%; | |
margin-top: -8px; | |
display: block; | |
width: 8px; | |
height: 8px; | |
background-color: #fafafa; | |
border-radius: 50%; | |
} | |
/* Degrees */ | |
.deg10 { -webkit-transform: rotate(10deg); transform: rotate(10deg); } | |
.deg11 { -webkit-transform: rotate(11.25deg); transform: rotate(11.25deg); } | |
.deg12 { -webkit-transform: rotate(12.857143deg); transform: rotate(12.857143deg); } | |
.deg15 { -webkit-transform: rotate(15deg); transform: rotate(15deg); } | |
.deg18 { -webkit-transform: rotate(18deg); transform: rotate(18deg); } | |
.deg20 { -webkit-transform: rotate(20deg); transform: rotate(20deg); } | |
.deg22 { -webkit-transform: rotate(22.50deg); transform: rotate(22.50deg); } | |
.deg25 { -webkit-transform: rotate(25.714286deg); transform: rotate(25.714286deg); } | |
.deg30 { -webkit-transform: rotate(30deg); transform: rotate(30deg); } | |
.deg36 { -webkit-transform: rotate(36deg); transform: rotate(36deg); } | |
.deg33 { -webkit-transform: rotate(33.75deg); transform: rotate(33.75deg); } | |
.deg38 { -webkit-transform: rotate(38.571429deg); transform: rotate(38.571429deg); } | |
.deg40 { -webkit-transform: rotate(40deg); transform: rotate(40deg); } | |
.deg45 { -webkit-transform: rotate(45deg); transform: rotate(45deg); } | |
.deg50 { -webkit-transform: rotate(50deg); transform: rotate(50deg); } | |
.deg51 { -webkit-transform: rotate(51.428572deg); transform: rotate(51.428572deg); } | |
.deg54 { -webkit-transform: rotate(54deg); transform: rotate(54deg); } | |
.deg56 { -webkit-transform: rotate(56.25deg); transform: rotate(56.25deg); } | |
.deg60 { -webkit-transform: rotate(60deg); transform: rotate(60deg); } | |
.deg64 { -webkit-transform: rotate(64.285715deg); transform: rotate(64.285715deg); } | |
.deg67 { -webkit-transform: rotate(67.50deg); transform: rotate(67.50deg); } | |
.deg70 { -webkit-transform: rotate(70deg); transform: rotate(70deg); } | |
.deg72 { -webkit-transform: rotate(72deg); transform: rotate(72deg); } | |
.deg75 { -webkit-transform: rotate(75deg); transform: rotate(75deg); } | |
.deg77 { -webkit-transform: rotate(77.142857deg); transform: rotate(77.142857deg); } | |
.deg78 { -webkit-transform: rotate(78.75deg); transform: rotate(78.75deg); } | |
.deg80 { -webkit-transform: rotate(80deg); transform: rotate(80deg); } | |
.deg90 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } | |
.deg100 { -webkit-transform: rotate(100deg); transform: rotate(100deg); } | |
.deg101 { -webkit-transform: rotate(101.25deg); transform: rotate(101.25deg); } | |
.deg102 { -webkit-transform: rotate(102.857143deg); transform: rotate(102.857143deg); } | |
.deg105 { -webkit-transform: rotate(105deg); transform: rotate(105deg); } | |
.deg108 { -webkit-transform: rotate(108deg); transform: rotate(108deg); } | |
.deg110 { -webkit-transform: rotate(110deg); transform: rotate(110deg); } | |
.deg112 { -webkit-transform: rotate(112.50deg); transform: rotate(112.50deg); } | |
.deg120 { -webkit-transform: rotate(120deg); transform: rotate(120deg); } | |
.deg123 { -webkit-transform: rotate(123.75deg); transform: rotate(123.75deg); } | |
.deg115 { -webkit-transform: rotate(115.714286deg); transform: rotate(115.714286deg); } | |
.deg126 { -webkit-transform: rotate(126deg); transform: rotate(126deg); } | |
.deg128 { -webkit-transform: rotate(128.571429deg); transform: rotate(128.571429deg); } | |
.deg130 { -webkit-transform: rotate(130deg); transform: rotate(130deg); } | |
.deg135 { -webkit-transform: rotate(135deg); transform: rotate(135deg); } | |
.deg140 { -webkit-transform: rotate(140deg); transform: rotate(140deg); } | |
.deg141 { -webkit-transform: rotate(141.428572deg); transform: rotate(141.428572deg); } | |
.deg144 { -webkit-transform: rotate(144deg); transform: rotate(144deg); } | |
.deg146 { -webkit-transform: rotate(146.25deg); transform: rotate(146.25deg); } | |
.deg150 { -webkit-transform: rotate(150deg); transform: rotate(150deg); } | |
.deg154 { -webkit-transform: rotate(154.285715deg); transform: rotate(154.285715deg); } | |
.deg157 { -webkit-transform: rotate(157.50deg); transform: rotate(157.50deg); } | |
.deg160 { -webkit-transform: rotate(160deg); transform: rotate(160deg); } | |
.deg162 { -webkit-transform: rotate(162deg); transform: rotate(162deg); } | |
.deg167 { -webkit-transform: rotate(167.142857deg); transform: rotate(167.142857deg); } | |
.deg165 { -webkit-transform: rotate(165deg); transform: rotate(165deg); } | |
.deg168 { -webkit-transform: rotate(168.75deg); transform: rotate(168.75deg); } | |
.deg170 { -webkit-transform: rotate(170deg); transform: rotate(170deg); } | |
/* Animation */ | |
.circle.no1 { | |
width: 30px; | |
height: 30px; | |
margin: -15px 0 0 -15px; | |
-webkit-animation: animatedOne 4s ease infinite; | |
animation: animatedOne 4s ease infinite; | |
} | |
@-webkit-keyframes animatedOne { | |
0% { -webkit-transform: rotate(0deg); } | |
35% { -webkit-transform: rotate(-810deg); } | |
100% { -webkit-transform: rotate(0deg); } | |
} | |
@keyframes animatedOne { | |
0% { transform: rotate(0deg); } | |
35% { transform: rotate(-810deg); } | |
100% { transform: rotate(0deg); } | |
} | |
.circle.no2 { | |
width: 60px; | |
height: 60px; | |
margin: -30px 0 0 -30px; | |
-webkit-animation: animatedTwo 4s ease infinite; | |
animation: animatedTwo 4s ease infinite; | |
} | |
@-webkit-keyframes animatedTwo { | |
0% { -webkit-transform: rotate(0deg); } | |
35% { -webkit-transform: rotate(-360deg); } | |
100% { -webkit-transform: rotate(0deg); } | |
} | |
@keyframes animatedTwo { | |
0% { transform: rotate(0deg); } | |
35% { transform: rotate(-360deg); } | |
100% { transform: rotate(0deg); } | |
} | |
.circle.no3 { | |
width: 90px; | |
height: 90px; | |
margin: -45px 0 0 -45px; | |
-webkit-animation: animatedThree 4s ease infinite; | |
animation: animatedThree 4s ease infinite; | |
} | |
@-webkit-keyframes animatedThree { | |
0% { -webkit-transform: rotate(0deg); } | |
35% { -webkit-transform: rotate(-210deg); } | |
100% { -webkit-transform: rotate(0deg); } | |
} | |
@keyframes animatedThree { | |
0% { transform: rotate(0deg); } | |
35% { transform: rotate(-210deg); } | |
100% { transform: rotate(0deg); } | |
} | |
.circle.no4 { | |
width: 120px; | |
height: 120px; | |
margin: -60px 0 0 -60px; | |
-webkit-animation: animatedFour 4s ease infinite; | |
animation: animatedFour 4s ease infinite; | |
} | |
@-webkit-keyframes animatedFour { | |
0% { -webkit-transform: rotate(0deg); } | |
35% { -webkit-transform: rotate(-135deg); } | |
100% { -webkit-transform: rotate(0deg); } | |
} | |
@keyframes animatedFour { | |
0% { transform: rotate(0deg); } | |
35% { transform: rotate(-135deg); } | |
100% { transform: rotate(0deg); } | |
} | |
.circle.no5 { | |
width: 150px; | |
height: 150px; | |
margin: -75px 0 0 -75px; | |
-webkit-animation: animatedFive 4s ease infinite; | |
animation: animatedFive 4s ease infinite; | |
} | |
@-webkit-keyframes animatedFive { | |
0% { -webkit-transform: rotate(0deg); } | |
35% { -webkit-transform: rotate(-90deg); } | |
100% { -webkit-transform: rotate(0deg); } | |
} | |
@keyframes animatedFive { | |
0% { transform: rotate(0deg); } | |
35% { transform: rotate(-90deg); } | |
100% { transform: rotate(0deg); } | |
} | |
.circle.no6 { | |
width: 180px; | |
height: 180px; | |
margin: -90px 0 0 -90px; | |
-webkit-animation: animatedSix 4s ease infinite; | |
animation: animatedSix 4s ease infinite; | |
} | |
@-webkit-keyframes animatedSix { | |
0% { -webkit-transform: rotate(0deg); } | |
35% { -webkit-transform: rotate(-60deg); } | |
100% { -webkit-transform: rotate(0deg); } | |
} | |
@keyframes animatedSix { | |
0% { transform: rotate(0deg); } | |
35% { transform: rotate(-60deg); } | |
100% { transform: rotate(0deg); } | |
} | |
.circle.no7 { | |
width: 210px; | |
height: 210px; | |
margin: -105px 0 0 -105px; | |
-webkit-animation: animatedSeven 4s ease infinite; | |
animation: animatedSeven 4s ease infinite; | |
} | |
@-webkit-keyframes animatedSeven { | |
0% { -webkit-transform: rotate(0deg); } | |
35% { -webkit-transform: rotate(-38.571429deg); } | |
100% { -webkit-transform: rotate(0deg); } | |
} | |
@keyframes animatedSeven { | |
0% { transform: rotate(0deg); } | |
35% { transform: rotate(-38.571429deg); } | |
100% { transform: rotate(0deg); } | |
} | |
.circle.no8 { | |
width: 240px; | |
height: 240px; | |
margin: -120px 0 0 -120px; | |
-webkit-animation: animatedEight 4s ease infinite; | |
animation: animatedEight 4s ease infinite; | |
} | |
@-webkit-keyframes animatedEight { | |
0% { -webkit-transform: rotate(0deg); } | |
35% { -webkit-transform: rotate(-22.5deg); } | |
100% { -webkit-transform: rotate(0deg); } | |
} | |
@keyframes animatedEight { | |
0% { transform: rotate(0deg); } | |
35% { transform: rotate(-22.5deg); } | |
100% { transform: rotate(0deg); } | |
} | |
.circle.no9 { | |
width: 270px; | |
height: 270px; | |
margin: -135px 0 0 -135px; | |
-webkit-animation: animatedNine 4s ease infinite; | |
animation: animatedNine 4s ease infinite; | |
} | |
@-webkit-keyframes animatedNine { | |
0% { -webkit-transform: rotate(0deg); } | |
35% { -webkit-transform: rotate(-10deg); } | |
100% { -webkit-transform: rotate(0deg); } | |
} | |
@keyframes animatedNine { | |
0% { transform: rotate(0deg); } | |
35% { transform: rotate(-10deg); } | |
100% { transform: rotate(0deg); } | |
} | |
.circle.no10 { | |
width: 400px; | |
height: 400px; | |
margin: -200px 0 0 -200px; | |
background-color: #000000; | |
opacity: 0.75; | |
z-index: 5; | |
} |