Only css...
A Pen by Judith Neumann on CodePen.
Only css...
A Pen by Judith Neumann on CodePen.
<div class="contenedor"> | |
<div class="fut3"> | |
<div class="aleta"></div> | |
<div class="fut"> | |
<ul> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
</ul> | |
</div> | |
<div class="circ3"><span class="circ"></span></div> | |
<div class="car"> | |
<span class="c9"></span> | |
<span class="c12"></span> | |
<span class="c1"></span> | |
<span class="c2"></span> | |
<span class="c3"></span> | |
<span class="c4"></span> | |
<span class="c5"></span> | |
<span class="c6"></span> | |
<span class="c7"></span> | |
</div> | |
</div> | |
<div class="so"></div> | |
</div> |
body{ | |
background:black; | |
} | |
.contenedor{ | |
position:relative; | |
width:600px; | |
height:600px; | |
border-radius:100%; | |
background:#ccc; | |
margin:121px auto; | |
} | |
.car{ | |
position:absolute; | |
margin:207px 271px | |
} | |
.fut3{ | |
position:absolute; | |
margin:21px 0; | |
animation:sube 3s alternate infinite; | |
-moz-animation:sube 3s alternate infinite; | |
-webkit-animation:sube 3s alternate infinite; | |
} | |
.fut{ | |
position:absolute; | |
width:400px; | |
height:30px; | |
border-radius:30px; | |
background:#D63850; | |
margin:300px 102px | |
} | |
.fut::before{ | |
content:""; | |
display:block; | |
width:400px; | |
height:9px; | |
border-radius:30px; | |
background:white; | |
margin:0px 0px | |
} | |
.fut::after{ | |
content:""; | |
display:block; | |
width:400px; | |
height:9px; | |
border-radius:30px; | |
background:rgba(255,255,255,.3); | |
margin:5px 0px; | |
} | |
.aleta{ | |
position:absolute; | |
width: 0; | |
height: 0; | |
border-bottom: 55px solid #D63850; | |
border-left: 125px solid transparent; | |
margin:265px 375px | |
} | |
ul{ | |
position:absolute; | |
width:350px; | |
height:9px; | |
list-style:none; | |
margin:0px -9px | |
} | |
ul li{ | |
display:inline-block; | |
width:9px; | |
height:9px; | |
border-radius:100%; | |
background:rgba(255,255,255,.3); | |
margin:0 6px | |
} | |
.circ3{ | |
position:absolute; | |
border-top: 9px solid #090909; | |
border-left: 12px solid transparent; | |
border-right: 12px solid transparent; | |
height: 0; | |
width: 60px; | |
margin:330px 162px | |
} | |
.circ3::before{ | |
content:""; | |
display:block; | |
border-top: 9px solid #090909; | |
border-left: 12px solid transparent; | |
border-right: 12px solid transparent; | |
height: 0; | |
width: 60px; | |
margin:-9px 182px | |
} | |
.circ{ | |
position:absolute; | |
width:80px; | |
height:12px; | |
border-radius:100%; | |
background:black; | |
margin:3px -9px | |
} | |
.circ::before{ | |
content:""; | |
display:block; | |
width:80px; | |
height:12px; | |
border-radius:100%; | |
background:black; | |
margin:0px 192px | |
} | |
.c1{ | |
position:absolute; | |
width:70px; | |
height:25px; | |
border-radius:0 12px 12px 0; | |
background:#E6CFC0; | |
border-top:5px solid #AA988E; | |
border-right:7px solid #AA988E; | |
border-bottom:7px solid #AA988E; | |
margin:3px 14px; | |
opacity:.7 | |
} | |
.c2{ | |
position:absolute; | |
width: 0; | |
height: 0; | |
border-bottom: 35px solid #AA988E; | |
border-left: 60px solid transparent; | |
margin:3px -43px; | |
opacity:.7 | |
} | |
.c2::before{ | |
content:""; | |
display:block; | |
width: 0; | |
height: 0; | |
border-bottom: 25px solid #E6CFC0; | |
border-left: 40px solid transparent; | |
margin:5px -40px | |
} | |
.c3{ | |
position:absolute; | |
border-bottom: 80px solid #666; | |
border-left: 25px solid transparent; | |
border-right: 25px solid transparent; | |
height: 0; | |
width: 21px; | |
transform:rotate(90deg); | |
-moz-transform:rotate(90deg); | |
-webkit-transform:rotate(90deg); | |
margin:-3px 87px | |
} | |
.c3::before{ | |
content:""; | |
display:block; | |
border-bottom: 21px solid #555; | |
border-left: 10px solid transparent; | |
border-right: 10px solid transparent; | |
height: 0; | |
width: 14px; | |
margin:-2px -8px | |
} | |
.c3::after{ | |
content:""; | |
display:block; | |
border-bottom: 27px solid #666; | |
border-left: 0px solid transparent; | |
border-right: 12px solid transparent; | |
height: 0; | |
width: 9px; | |
margin:-25px 9px | |
} | |
.c4{ | |
position:absolute; | |
border-bottom: 80px solid #555; | |
border-left: 9px solid transparent; | |
border-right: 12px solid transparent; | |
height: 0; | |
width: 12px; | |
transform:rotate(-90deg); | |
-moz-transform:rotate(-90deg); | |
-webkit-transform:rotate(-90deg); | |
margin:7px -85px | |
} | |
.c4::before{ | |
content:""; | |
display:block; | |
border-bottom: 83px solid #555; | |
border-left: 17px solid transparent; | |
border-right: 12px solid transparent; | |
height: 0; | |
width: 14px; | |
transform:rotate(-5deg); | |
-moz-transform:rotate(-5deg); | |
-webkit-transform:rotate(-5deg); | |
margin:-3px -27px | |
} | |
.c6{ | |
position:absolute; | |
width:40px; | |
height:21px; | |
background:#333; | |
border-radius:40px 40px 0 0; | |
margin:53px -60px | |
} | |
.c6::before{ | |
content:""; | |
display:block; | |
width:40px; | |
height:21px; | |
background:#333; | |
border-radius:40px 40px 0 0; | |
margin:0px 112px | |
} | |
.c6::after{ | |
content:""; | |
display:block; | |
width:251px; | |
height:2px; | |
background:gray; | |
margin:-27px -47px | |
} | |
.c5{ | |
position:absolute; | |
width:112px; | |
height:40px; | |
background:#555; | |
margin:30px -29px; | |
border-bottom:5px solid #121212; | |
} | |
.c7{ | |
position:absolute; | |
width:21px; | |
height:21px; | |
border-radius:100%; | |
background:gray; | |
border:9px solid black; | |
margin:55px -60px | |
} | |
.c7::before{ | |
content:""; | |
display:block; | |
width:21px; | |
height:21px; | |
border-radius:100%; | |
background:gray; | |
border:9px solid black; | |
margin:-10px 102px | |
} | |
.c7::after{ | |
content:""; | |
display:block; | |
width:3px; | |
height:40px; | |
background:gray; | |
margin:-63px 50px; | |
} | |
.c9{ | |
position:absolute; | |
width: 0; | |
height: 0; | |
border-bottom: 30px solid #212121; | |
border-left: 30px solid transparent; | |
margin:-9px 112px | |
} | |
.c9::before{ | |
content:""; | |
display:block; | |
border-bottom: 9px solid #121212; | |
border-left: 7px solid transparent; | |
border-right: 7px solid transparent; | |
height: 0; | |
width: 12px; | |
margin:16px -45px | |
} | |
.c12{ | |
position: absolute; | |
width: 9px; | |
height: 9px; | |
background: #333; | |
-moz-border-radius: 100px / 50px; | |
-webkit-border-radius: 100px / 50px; | |
border-radius: 100px / 50px; | |
margin:-22px 106px | |
} | |
.c12:after { | |
content: ''; | |
position: absolute; | |
left: 0px; | |
top: 0px; | |
width:9px; | |
height: 30px; | |
background: #333; | |
-moz-border-radius: 100px / 50px; | |
-webkit-border-radius: 100px / 50px; | |
border-radi | |
margin:-3px 46px | |
} | |
.so{ | |
position:absolute; | |
width:400px; | |
height:30px; | |
border-radius:100%; | |
background:gray; | |
margin:430px 102px; | |
animation:re 3s alternate infinite; | |
-moz-animation:re 3s alternate infinite; | |
-webkit-animation:re 3s alternate infinite; | |
} | |
@keyframes sube{ | |
0%{margin:21px 0px;} | |
100%{margin:-21px 0px;} | |
} | |
@-moz-keyframes sube{ | |
0%{margin:21px 0px;} | |
100%{margin:-21px 0px;} | |
} | |
@-webkit-keyframes sube{ | |
0%{margin:21px 0px;} | |
100%{margin:-21px 0px;} | |
} | |
@keyframes re{ | |
0%{transform:scale(1); | |
-moz-transform:scale(1); | |
-webkit-transform:scale(1);} | |
100%{transform:scale(.7); | |
-moz-transform:scale(.7); | |
-webkit-transform:scale(.7);} | |
} | |
@-moz-keyframes re{ | |
0%{transform:scale(1); | |
-moz-transform:scale(1); | |
-webkit-transform:scale(1);} | |
100%{transform:scale(.7); | |
-moz-transform:scale(.7); | |
-webkit-transform:scale(.7);} | |
} | |
@-webkit-keyframes re{ | |
0%{transform:scale(1); | |
-moz-transform:scale(1); | |
-webkit-transform:scale(1);} | |
100%{transform:scale(.7); | |
-moz-transform:scale(.7); | |
-webkit-transform:scale(.7);} | |
} |