Funny icons (Only CSS)

HTML
<ul> <li><div class="cafe"><div class="asa"></div></div></li> <li><div class="asitas"></div><div class="olla"></div><div class="olla3"></div></li> <li><div class="tost3"></div><div class="tost"><div class="bot"><div class="bot3"></div></div></div></li> <li><div class="cafetera"><div class="cofee"><div class="cofee3"></div></div><div class="cua"></div><div class="taza"></div></div></li> <li><div class="avioncito"><div class="alas"><div class="alas3"></div><div class="alas7"></div></div><div class="avion"></div><div class="raya"></div></div></li> <li><div class="valija"><div class="valija3"><div class="ruedas"></div></div><div class="ruedas3"></div><div class="rayas7"></div></div></li> <li><div class="sol"><div class="circ"></div></div><div class="arena"></div><div class="sol3"></div></li> <li><div class="clik"></div><div class="fotos"><div class="luz"></div></div><div class="luz3"></div></li> <li><div class="aletas"></div><div class="bolso"><div class="hojas"></div><div class="bolsillo"></div></div></li> <li><div class="laz"><div class="laz3"></div></div><div class="linea"></div></li> <li><div class="table"><div class="letra"></div><div class="letra3"></div><div class="letra7"></div><div class="letra9"></div></div></li> <li><div class="bulb"><div class="bulb3"></div></div></li> </ul>
CSS
body{ background:black; } ul{ position:relative; width:800px; height:600px; list-style:none; margin:90px auto; } ul li{ display:inline-block; width:152px; height:152px; border-radius:100%; background:white; margin:21px 17px } .cafe{ position:absolute; width:85px; height:85px; border-radius:100%; background:#60D9F7; border-right:5px solid #3C909B; margin:40px 30px; animation:va 3s alternate infinite; } .cafe::before{ content:""; display:block; width:85px; height:43px; border-radius:90px 90px 0 0; background:#F977B8; border-right:5px solid #C9609C } .cafe::after{ content:""; display:block; width:45px; height:9px; background:#F977B8; border-right:3px solid #C9609C; margin:-45px 21px } .asa{ position:absolute; width:83px; height:7px; background:#333; border-radius:33px; margin:-30px 12px } .asa::before{ content:""; position:absolute; width:7px; height:50px; background:#333; border-radius:33px; margin:0px 80px } .asa::after{ content:""; position:absolute; width: 70px; height: 150px; border-top: 3px solid white; border-left: 3px solid transparent; border-right: 3px solid transparent; border-radius: 100px / 100px; transform:rotate(-99deg); margin:-50px 35px } .olla{ position:absolute; width:80px; height:60px; border-radius:3px 3px 33px 33px; background: #312142; border-right: 9px solid #2B1344; margin:70px 32px; } .olla::before{ content:""; position:absolute; width: 40px; height: 150px; border-top: 3px solid white; border-left: 3px solid transparent; border-right: 3px solid transparent; border-radius: 100px / 100px; transform:rotate(-152deg); margin:-95px 35px} .olla3{ position:absolute; width:85px; height:30px; border-radius:80px 80px 0 0; background:#FFD800; border-bottom:7px solid #E5CA00; border-right:9px solid #E5CA00; margin:33px 29px; animation:va3 .9s alternate infinite; } .olla3::before{ content:""; display:block; width:21px; height:21px; border-radius:100%; background: #ff7b0d; margin:-12px 35px } .olla3::after{ content:""; position:absolute; width: 35px; height: 150px; border-top: 3px solid white; border-left: 3px solid transparent; border-right: 3px solid transparent; border-radius: 100px / 100px; transform:rotate(-50deg); margin:-12px 55px } .tost{ position:absolute; width:80px; height:70px; border-radius:12px; background:#00B587; border-right:7px solid #006843; margin:50px 35px; } .asitas{ position:absolute; width:132px; height:12px; border-radius:12px; background: #ff7b0d; margin:80px 12px } .tost::before{ content:""; display:block; width:7px; height:9px; background:#ff6666; border-right:3px solid #F9454B; margin:70px 12px; } .tost::after{ content:""; display:block; width:7px; height:9px; background:#ff6666; border-right:3px solid #F9454B; margin:-79px 65px; } .bot{ position:absolute; width:12px; height:12px; border-radius:100%; background:#ff6666; margin:-132px 50px } .tost3{ position:absolute; width:45px; height:40px; border-radius:9px; background:#F4D444; border-right:3px solid #C9AE38; margin:50px 55px; animation:va7 3s alternate infinite; } .tost3::before{ content:""; display:block; width:21px; height:9px; border-radius:3px; background:#ff6666; margin:37px 65px } .tost3::after{ content:""; position:absolute; width: 12px; height: 150px; border-top: 3px solid white; border-left: 3px solid transparent; border-right: 3px solid transparent; border-radius: 100px / 100px; transform:rotate(-50deg); margin:-102px 55px; } .bot3{ position:absolute; width: 25px; height: 150px; border-top: 3px solid white; border-left: 3px solid transparent; border-right: 3px solid transparent; border-radius: 100px / 100px; transform:rotate(-50deg); margin:-33px 3px; z-index:333; } .bot3::before{ content:""; display:block; width: 25px; height: 150px; border-top: 3px solid white; border-left: 3px solid transparent; border-right: 3px solid transparent; border-radius: 100px / 100px; transform:rotate(172deg); margin:-80px -9px } .cafetera{ position:absolute; width:80px; height:80px; border-radius:12px; background:#182638; border-right:7px solid #0C121C; margin:30px 35px; } .cafetera::before{ content:""; display:block; width:80px; height:21px; border-radius:12px 12px 0 0; background:#EDA765; border-right:7px solid #CC9D57; margin:-12px 0; } .cafetera::after{ content:""; display:block; width:80px; height:21px; border-radius:0 0 12px 12px ; background:#EDA765; border-right:7px solid #CC9D57; margin:75px 0; } .cua{ position:absolute; width:30px; height:9px; border-radius:12px; background:white; border-right:5px solid #ccc; margin:12px 27px } .cua::before{ content:""; display:block; width:12px; height:12px; border-radius:100%; background:#DB3949; margin:65px 37px } .cua::after{ content:""; position:absolute; width: 21px; height: 150px; border-top: 3px solid white; border-left: 3px solid transparent; border-right: 3px solid transparent; border-radius: 100px / 100px; transform:rotate(-50deg); margin:-182px 25px;} .taza{ position:absolute; width:30px; height:21px; border-radius:0 0 30px 30px; background:white; border-right:7px solid #ccc; margin:55px 27px } .taza::before{ content:""; display:block; width:7px; height:7px; border-radius:100%; border:3px solid #ccc; margin:3px 30px } .taza::after{ content:""; position:absolute; width: 21px; height: 150px; border-bottom: 3px solid white; border-left: 3px solid transparent; border-right: 3px solid transparent; border-radius: 100px / 100px; transform:rotate(50deg); margin:-112px 25px;} .cofee{ position:absolute; width:7px; height:45px; border-radius:12px; background:#C97B36; margin:12px 41px; animation:grow 3s linear infinite; } .cofee3{ position:absolute; width:3px; height:35px; background:#7C4421; margin:0 5px; animation:grow 3s linear infinite; } .avioncito{ position:absolute; margin:0 0; animation:va3 1.2s alternate infinite; } .avion{ position:absolute; width: 60px; height: 65px; background:#60D9F7; border-left:5px solid #3C909B; border-radius: 50px 50px 0 50px; transform: rotate(-135deg); margin:50px 43px; } .avion::before{ content:""; display:block; width:50px; height:7px; border-radius:3px; background:#333; transform: rotate(135deg); margin:55px 30px } .avion::after{ content:""; display:block; width:30px; height:7px; border-radius:3px; background:#333; opacity:.7; transform: rotate(135deg); margin:-90px 12px } .alas{ position:absolute; width:132px; height:7px; border-radius:3px; background:#333; margin:90px 9px } .alas::before{ content:""; position:absolute; width:9px; height:12px; border-radius:100%; background:#F977B8; border-right:5px solid #C9609C; margin:-65px 60px; } .alas3{ position:absolute; width:21px; height:25px; border-radius:100%; background:#F977B8; border-right:5px solid #C9609C; margin:-9px 5px; animation:rotar 3s linear infinite; } .alas7{ position:absolute; width:21px; height:25px; border-radius:100%; background:#F977B8; border-right:5px solid #C9609C; margin:-9px 102px; animation:rotar 3s linear infinite; } .raya{ position:absolute; width: 50px; height: 150px; border-top: 3px solid white; border-left: 3px solid transparent; border-right: 3px solid transparent; border-radius: 100px / 100px; transform:rotate(-95deg); margin:3px 95px} .valija{ position:absolute; width:60px; height:90px; background: #312142; border-right: 9px solid #2B1344; border-radius:12px; margin:30px 40px; animation:go3 3s alternate infinite; } .valija::before{ content:""; display:block; width:30px; height:12px; border-top:5px solid #ff7b0d; border-right:5px solid #ff7b0d; border-left:5px solid #ff7b0d; margin:-17px 14px } .rayas7{ position:absolute; width: 21px; height: 150px; border-top: 3px solid white; border-left: 3px solid transparent; border-right: 3px solid transparent; border-radius: 100px / 100px; transform:rotate(-50deg); margin:-3px 53px;} .rayas7::before{ content:""; position:absolute; width: 21px; height: 150px; border-top: 3px solid white; border-left: 3px solid transparent; border-right: 3px solid transparent; border-radius: 100px / 100px; transform:rotate(-50deg); margin:12px 0px;} .valija3{ position:absolute; width:60px; height:5px; background:#FFD800; border-right:9px solid #E5CA00; margin:40px 0 } .valija3::before{ content:""; position:absolute; width:60px; height:5px; background:#FFD800; border-right:9px solid #E5CA00; margin:35px 0 } .valija3::after{ content:""; position:absolute; width:45px; height:3px; background:#ff7b0d; border-right:9px solid #B7470B; margin:67px 7px } .ruedas{ position:absolute; width:12px; height:16px; border-radius:100%; background:#FFD800; border-right:5px solid #E5CA00; margin:70px 12px; animation:rotar 3s linear infinite; } .ruedas3{ position:absolute; width:12px; height:16px; border-radius:100%; background:#FFD800; border-right:5px solid #E5CA00; margin:110px 40px; animation:rotar 3s linear infinite; } .arena{ position:absolute; width:90px; height:47px; border-radius:60px 60px 0 0; background:#F4D444; border-right:7px solid #C9AE38; margin:80px 27px } .arena::before{ content:""; position:absolute; width: 43px; height: 150px; border-top: 3px solid white; border-left: 3px solid transparent; border-right: 3px solid transparent; border-radius: 100px / 100px; transform:rotate(-50deg); margin:-3px 50px;} .sol{ position:absolute; width:5px; height:60px; background:#ff6666; border-right:3px solid #F9454B; margin:30px 85px; transform:rotate(35deg); animation:rotar9 3s alternate infinite; } .sol::before{ content:""; display:block; width:55px; height:35px; border-radius:50px 50px 0 0; background:#00B587; border-right:7px solid #006843; margin:-12px -25px } .sol::after{ content:""; position:absolute; width: 21px; height: 150px; border-top: 3px solid white; border-left: 3px solid transparent; border-right: 3px solid transparent; border-radius: 100px / 100px; transform:rotate(-50deg); margin:-33px 30px;} .circ{ position:absolute; width:16px; height:8px; border-radius:16px 16px 0 0 ; background:white; margin:7px -21px } .circ::before{ content:""; position:absolute; width:16px; height:8px; border-radius:16px 16px 0 0 ; background:white; margin:0px 17px } .circ::after{ content:""; position:absolute; width:16px; height:8px; border-radius:16px 16px 0 0 ; background:white; margin:0px 33px } .sol3{ position:absolute; width:23px; height:30px; border-radius:100%; background:#F4D444; border-right:7px solid #C9AE38; margin:21px 27px; } .sol3::before{ content:""; position:absolute; width: 17px; height: 150px; border-top: 3px solid white; border-left: 3px solid transparent; border-right: 3px solid transparent; border-radius: 100px / 100px; transform:rotate(-90deg); margin:-60px 68px;} .fotos{ position:absolute; width:80px; height:65px; border-radius:12px; background:#182638; border-right:7px solid #0C121C; margin:40px 30px; } .fotos::before{ content:""; display:block; width:23px; height:30px; border-radius:100%; background:#EDA765; border-right:7px solid #CC9D57; margin:16px 30px; } .fotos::after{ content:""; display:block; width:19px; height:21px; border-radius:100%; background:white; border-right:3px solid #ccc; margin:-41px 34px; } .clik{ position:absolute; width:12px; height:9px; background:#182638; border-right:7px solid #0C121C; margin:33px 83px; animation:cli 3s linear infinite; } .luz{ position:absolute; width:12px; height:12px; border-radius:100%; background:#DB3949; margin:-50px 9px; } .luz:before{ content:""; position:absolute; width: 21px; height: 150px; border-top: 3px solid white; border-left: 3px solid transparent; border-right: 3px solid transparent; border-radius: 100px / 100px; transform:rotate(-112deg); margin:-63px 57px;} .luz:after{ content:""; position:absolute; width: 21px; height: 150px; border-top: 3px solid white; border-left: 3px solid transparent; border-right: 3px solid transparent; border-radius: 100px / 100px; transform:rotate(70deg); margin:-45px -17px;} .luz3{ position:absolute; width:30px; height:30px; border-radius:100%; background:white; opacity:0; margin:55px 60px; animation:cli3 3s linear infinite; } .bolso{ position:absolute; width:80px; height:102px; border-radius: 80px 80px 21px 21px; background:#60D9F7; border-right:5px solid #3C909B; margin:21px 33px } .bolso::before{ content:""; position:absolute; width:60px; height:65px; border-radius: 80px 80px 21px 21px; background:#F977B8; border-right:5px solid #C9609C; margin:33px 8px } .bolso::after{ content:""; position:absolute; width: 40px; height: 150px; border-top: 3px solid white; border-left: 3px solid transparent; border-right: 3px solid transparent; border-radius: 100px / 100px; transform:rotate(-45deg); margin:-7px 47px;} .bolsillo{ position:absolute; width:50px; height:40px; border-radius: 0 0 9px 9px; background:#333; margin:53px 16px } .bolsillo:before{ content:""; position:absolute; width: 21px; height: 150px; border-top: 3px solid white; border-left: 3px solid transparent; border-right: 3px solid transparent; border-radius: 100px / 100px; transform:rotate(132deg); margin:-95px -30px;} .aletas{ position:absolute; width:21px; height:35px; border-radius:12px; background:#333; margin:12px 40px } .aletas::before{ content:""; position:absolute; width:21px; height:35px; border-radius:12px; background:#333; margin:0px 50px } .hojas{ position:absolute; width:40px; height:40px; background:white; margin:53px 21px; animation:subir 3s alternate infinite; } .hojas::before{ content:"HELLO"; position:absolute; font-family:verdana; font-weight:700; font-size:9px; margin:12px 3px; } .laz{ position:absolute; width:21px; height:85px; border-radius:30px 30px 0 0; background: #312142; border-right: 9px solid #2B1344; margin:25px 55px; transform:rotate(35deg); animation:escri 2.1s linear infinite; } .laz::before{ content:""; display:block; width:21px; height:16px; border-radius:21px 21px 0 0; background:#FFD800; border-right:9px solid #E5CA00; } .laz3{ position:absolute; width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 21px solid #ff7b0d; margin:69px -1px; } .laz3::before{ content:""; position:absolute; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 12px solid #312142; margin:-12px -8px; } .laz::after{ content:""; position:absolute; width: 19px; height: 150px; border-top: 3px solid white; border-left: 3px solid transparent; border-right: 3px solid transparent; border-radius: 100px / 100px; transform:rotate(-50deg); margin:-37px 52px;} .linea{ position:absolute; width:50px; height:3px; background: #312142; margin:116px 30px; animation:escri3 2.1s linear infinite; } .table{ position:absolute; width:102px; height:85px; background:#F4D444; border-radius:12px; border-right:5px solid #C9AE38; border-bottom:5px solid #C9AE38; margin:30px 21px } .table::before{ content:""; position:absolute; width:80px; height:63px; background:#00B587; margin:12px 12px; } .table::after{ content:""; position:absolute; width: 19px; height: 150px; border-top: 3px solid white; border-left: 3px solid transparent; border-right: 3px solid transparent; border-radius: 100px / 100px; transform:rotate(-50deg); margin:-21px 52px;} .letra{ position:absolute; width:4px; height:40px; background:#ff6666; border-right:3px solid #F9454B; margin:21px 25px; animation:escr 3s linear infinite; } .letra3{ position:absolute; width:23px; height:4px; background:#ff6666; border-right:3px solid #F9454B; margin:40px 30px; animation:escr3 3s linear infinite; } .letra7{ position:absolute; width:4px; height:40px; background:#ff6666; border-right:3px solid #F9454B; margin:21px 50px; animation:escr 3s linear infinite; } .letra9{ position:absolute; width:4px; height:40px; background:#ff6666; border-right:3px solid #F9454B; margin:21px 70px; animation:escr7 3s linear infinite; } .bulb{ position:absolute; width:75px; height:75px; border-radius:100%; background:#CC9D57; margin:21px 40px; animation:light 3s linear infinite; } .bulb::before{ content:""; position:absolute; width:70px; height:70px; border-radius:100%; background:#EDA765; margin:0px } .bulb::after{ content:""; display:block; border-top: 27px solid #EDA765; border-left: 8px solid transparent; border-right: 8px solid transparent; height: 0; width: 37px; margin:60px 11px } .bulb3{ position:absolute; width:40px; height:25px; border-radius:0 0 30px 30px; background:#182638; margin:90px 17px } .bulb3::before{ content:""; position:absolute; width: 40px; height: 150px; border-top: 3px solid white; border-left: 3px solid transparent; border-right: 3px solid transparent; border-radius: 100px / 100px; transform:rotate(-75deg); margin:-121px 43px;} .bulb3::after{ content:"IDEAS"; position:absolute; font-family:verdana; font-size:12px; font-weight:700; color:#DB3949; margin:-43px 0px;} @keyframes va{ 0%,25%{ transform:rotate(0deg);} 75%,100%{ transform:rotate(-45deg);} } @keyframes va3 { 0%{ transform: translatey(-3px);} 100%{ transform: translatey(3px);} } @keyframes va7 { 0%{ transform: translatey(0px);} 100%{ transform: translatey(-30px);} } @keyframes grow { 0%{ height:0px;} 50%,100%{ height:45px;} } @keyframes rotar { 0%{transform:rotate(0deg);} 100%{ transform:rotate(360deg);} } @keyframes go3 { 0%{transform:translatex(-9px);} 100%{ transform:translatex(9px)} } @keyframes rotar9{ 0%{transform:rotate(35deg);} 100%{ transform:rotate(21deg);} } @keyframes cli { 0%,25%{ transform: translatey(0px);} 50%,100%{ transform: translatey(3px);} } @keyframes cli3{ 0%,25%{ opacity:0; transform: scale(1);} 50%,100%{ opacity:.5;transform: scale(1.2)} } @keyframes subir { 0%,25%{ transform: translatey(0px);} 50%,100%{ transform: translatey(-30px);} } @keyframes escri { 0%{ margin:21px 55px;} 100%{ margin:21px 90px;} } @keyframes escri3{ 0%{ width:0px} 100%{ width:50px} } @keyframes escr{ 0%,25%,35%{ height:0px} 40%,50%,60%,70%,80%,90%,100%{ height:40px} } @keyframes escr3{ 0%,25%,35%,40%{ width:0px; opacity:0} 50%,60%,70%,80%,90%,100%{ width:23px; opacity:1;} } @keyframes escr7{ 0%,25%,35%,50%{ height:0px} 60%,70%,80%,90%,100%{ height:40px} } @keyframes light{ 0%{ opacity:0} 50%{ opacity:1;} 75%{ opacity:1;} 100%{ opacity:1;} }
JAVASCRIPT
Expand for more options Login