Chopper by pure CSS, no image, no javascript
How do I make an chopper by pure css, no image, no javascript?
Crying Chopper by CSS only. Try to move your mouse over it! XD. What is a chopper by pure css, no image, no javascript? How do you make a chopper by pure css, no image, no javascript? This script and codes were developed by AaronChuo (小狂) on 11 September 2022, Sunday.
Chopper by pure CSS, no image, no javascript Previews
Chopper by pure CSS, no image, no javascript - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Chopper by pure CSS, no image, no javascript</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--滑鼠移上去看看喬巴的反應吧！-->
<div class="chopper-container"> <ul class="chopper-antlers chopper-antlers-left"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <ul class="chopper-antlers chopper-antlers-right"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div class="chopper-hat"> <div class="chopper-hat-top"> <div class="chopper-hat-x"></div> <div class="chopper-hat-shadow"></div> </div> <div class="chopper-hat-brim"> <div class="chopper-hat-brim-shadow"></div> </div> </div> <div class="chopper-face"> <div class="chopper-eye chopper-left-eye"> <ul class="white"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <ul class="black"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class="chopper-eye chopper-right-eye mirror"> <ul class="white"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <ul class="black"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class="chopper-nose"> <ul> <li></li> <li></li> </ul> </div> <div class="chopper-lip-cry"></div> <div class="chopper-lip chopper-left-lip"></div> <div class="chopper-lip chopper-right-lip"></div> <div class="chopper-mouth"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div>
</div> <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script>
</body>
</html>Chopper by pure CSS, no image, no javascript - Script Codes CSS Codes
html, body { width: 100%; height: 100%;
}
* { transition: all ease .1s;
}
ul { list-style: none; margin: 0; padding: 0;
}
.reverse { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg);
}
.chopper-container { position: relative; width: 768px; height: 768px; margin: 15% auto;
}
.chopper-antlers { width: 20%; height: 12%; border: 5px solid #000; border-top: 0; border-radius: 50% / 20% 20% 80% 62%; background: rgb(130, 96, 59);
}
.chopper-antlers:before { position: absolute; top: -3%; left: 48%; width: 15%; height: 33%; border: 6px solid #000; border-top: 0; border-radius: 0 0 46% 45%; background: #FFF; z-index: 99; content: '';
}
.chopper-antlers:after { position: absolute; top: 23%; left: 0; width: 95%; height: 58%; border-radius: 50% 40% 43% 95%; background: rgb(130, 96, 59); -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); z-index: 9; content: '';
}
.chopper-antlers-left { position: absolute; top: 0; left: 10%;
}
.chopper-antlers-right { position: absolute; top: 0; right: 8%; -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-ransform: scaleX(-1); -o-ransform: scaleX(-1); z-index: 9;
}
.chopper-antlers li { position: absolute; display: inline-block; top: 80%; width: 25%; height: 120%; border-radius: 30%; background: rgb(130, 96, 59); z-index: 9;
}
.chopper-antlers-left li { box-shadow: 6px 0 0 0 #000 inset, -6px 0 0 0 #000 inset, 0 6px 0 0 #000 inset;
}
.chopper-antlers-left li:nth-child(2),
.chopper-antlers-left li:nth-child(3),
.chopper-antlers-left li:nth-child(5){ box-shadow: 6px 0 0 0 #000 inset, -6px 0 0 0 #000 inset, 0 6px 0 0 #000 inset, -5px 8px 0 0 rgba(0, 0, 0, .2);
}
.chopper-antlers-right li { box-shadow: 6px 0 0 0 #000 inset, -6px 0 0 0 #000 inset, 0 6px 0 0 #000 inset, 11px 0 0 0 rgba(0, 0, 0, .2) inset;
}
.chopper-antlers li:first-child { top: -58%; left: -7%; border-radius: 50% 10% 0 40%; -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -ms-transform: rotate(2deg); -o-transform: rotate(2deg);
}
.chopper-antlers li:nth-child(2) { top: -69%; left: 10%; border-radius: 50% 10% 0 40%;
}
.chopper-antlers li:nth-child(3) { top: -76%; left: 27%; border-radius: 50% 15% 10% 40%;
}
.chopper-antlers li:nth-child(4) { top: -72%; left: 67%; height: 110%; border-radius: 30% 40% 40% 10%; -webkit-transform: rotate(1deg); -moz-transform: rotate(1deg); -ms-transform: rotate(1deg); -o-transform: rotate(1deg);
}
.chopper-antlers li:nth-child(5) { top: -64%; left: 85%; height: 125%; border-radius: 30% 40% 45% 30%; -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg);
}
.chopper-antlers li:last-child { top: 74%; left: 79%; width: 20%; height: 70%; border-left: 6px solid #000; border-right: 6px solid #000; border-radius: 0; box-shadow: none; -webkit-transform: rotate(-37deg); -moz-transform: rotate(-37deg); -ms-transform: rotate(-37deg); -o-transform: rotate(-37deg); z-index: 9;
}
.chopper-hat-top,
.chopper-hat-body,
.chopper-hat-brim { background: rgb(233, 116, 109);
}
.chopper-hat { position: absolute; top: 0; left: 0; width: 100%; height: 30%;
}
.chopper-hat-top { position: absolute; top: 0; left: 30%; width: 40%; height: 50%; border-right: 6px solid #000; border-left: 6px solid #000;
}
.chopper-hat-top:before { position: absolute; top: -65%; left: -2%; width: 100.1%; height: 65%; border: 6px solid #000; border-radius: 50% / 80% 80% 10% 10%; background: rgb(233, 116, 109); z-index: -9; content: '';
}
.chopper-hat-x { width: 36%; height: 36%; margin: auto; background: #FFF; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); box-shadow: 0 0 0 6px #000 inset;
}
.chopper-hat-x:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: auto; background: #FFF; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); box-shadow: 0 0 0 6px #000 inset; z-index: 999999; content: '';
}
.chopper-hat-x:after { position: absolute; top: 15%; left: 30%; width: 43%; height: 71%; background: #FFF; z-index: 999999; content: '';
}
.chopper-hat-shadow { position: absolute; top: -10%; left: 0; width: 53%; height: 95%; border-radius: 83% 50% 30% 185%; background: rgba(0, 0, 0, .3); -webkit-transform: matrix(0,1.411,1.611,-0.278, 1, 9); -moz-transform: matrix(0,1.411,1.611,-0.278, 1, 9); -ms-transform: matrix(0,1.411,1.611,-0.278, 1, 9); -o-transform: matrix(0,1.411,1.611,-0.278, 1, 9);
}
.chopper-hat-brim { overflow: hidden; position: absolute; top: 30%; left: 15%; width: 70%; height: 90%; margin: auto; border: 6px solid #000; border-radius: 50% / 50% 50% 35% 35%; z-index: 99;
}
.chopper-hat-brim:before { position: absolute; top: 15%; left: -1%; width: 100%; height: 80%; border: 6px solid #000; border-radius: 50% / 70% 70% 20% 20%; background: rgb(148, 71, 77); z-index: 99; content: '';
}
.chopper-hat-brim-shadow { position: absolute; top: 0; left: 0; width: 38%; height: 80%; border-radius: 0 30% 0 0; background: rgba(0, 0, 0, .3);
}
.chopper-face { position: absolute; top: 20.5%; left: 30%; width: 39%; height: 15%; border: 6px solid #000; border-radius: 60% / 60% 60% 30% 30%; background: rgb(223, 180, 125); box-shadow: 0 20px 0 rgba(0, 0, 0, .2) inset; z-index: 99; cursor: pointer;
}
.chopper-face:before { position: absolute; top: 50%; left: -2%; width: 100%; height: 40%; border-right: 6px solid #000; border-left: 6px solid #000; background: rgb(223, 180, 125); z-index: 999; content: '';
}
.chopper-face:after { position: absolute; top: 60%; left: -2%; width: 100%; height: 125%; border-radius: 45% / 20% 20% 80% 80%; border: 6px solid #000; background: rgb(223, 180, 125); z-index: 99; content: '';
}
.chopper-face-bottom { width: 29.5%; height: 30%; margin: -15% auto; border-radius: 500% 0 350% 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg);
}
.chopper-eye { position: absolute; top: 33%; width: 20%; height: 55%; border: 6px solid #000; border-radius: 50%; background: #FFF; z-index: 9999;
}
.chopper-eye:before { position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; border-radius: 50%; background: #000; z-index: 9; content: '';
}
.chopper-left-eye { left: 10%;
}
.chopper-right-eye { right: 10%;
}
.chopper-face:hover .chopper-eye { border-color: #FFF;
}
.chopper-face:hover .chopper-eye li { position: absolute; width: 25%; height: 25%; border-radius: 50%;
}
.chopper-eye .white li { background: #FFF;
}
.chopper-eye .white li:first-child { top: 22%; left: -22%; width: 60%; height: 60%;
}
.chopper-eye .white li:nth-child(2) { top: 85%; left: 10%; width: 20%; height: 50%;
}
.chopper-eye .white li:nth-child(3) { top: -13%; left: -2%; width: 72%; height: 55%;
}
.chopper-eye .white li:nth-child(4) { top: -12%; left: 52%; width: 65%; height: 70%;
}
.chopper-eye .white li:nth-child(5) { top: 82%; left: 60%; width: 27%; height: 45%; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg);
}
.chopper-eye .white li:last-child { top: 50%; left: 60%; width: 52%; height: 50%;
}
.chopper-eye .black li { background: #000;
}
.chopper-eye .black li:first-child { top: 6%; left: 2%; width: 70%; height: 60%;
}
.chopper-eye .black li:nth-child(2) { top: 12%; left: 46%; width: 52%; height: 60%;
}
.chopper-eye .black li:nth-child(3) { top: 58%; left: 30%; width: 35%; height: 35%;
}
.chopper-eye .black li:nth-child(4) { top: 50%; left: 10%; width: 35%; height: 35%;
}
.chopper-eye .black li:nth-child(5) { top: 52%; left: 52%; width: 35%; height: 35%;
}
.chopper-eye.mirror { -webkit-transform: scaleX(-1) rotate(20deg); -moz-transform: scaleX(-1) rotate(20deg); -ms-ransform: scaleX(-1) rotate(20deg); -o-ransform: scaleX(-1) rotate(20deg);
}
.chopper-nose { position: absolute; top: 77%; left: 43%; width: 10%; height: 15%; border: 6px solid #000; border-radius: 60% / 40% 40% 100% 100%; background: #41588c; z-index: 99999;
}
.chopper-face:hover .chopper-nose li { display: block; position: absolute; top: 128%; left: 88%; width: 50%; height: 80%; border-radius: 50% / 30% 30% 70% 70%; -webkit-transform: skew(10deg, 30deg); -moz-transform: skew(10deg, 30deg); -ms-transform: skew(10deg, 30deg); -o-transform: skew(10deg, 30deg); background: #FFF;
}
.chopper-face:hover .chopper-nose:before { position: absolute; top: 120%; left: 50%; height: 200%; border-left: 1px solid #000; background: #000; content: '';
}
.chopper-nose:after { position: absolute; top: 11%; left: 7%; width: 26%; height: 35%; border-radius: 50%; background: rgba(255, 255, 255, .9); content: '';
}
.chopper-lip { position: absolute; top: 74%; width: 20%; height: 50%; border-right: 6px solid #000; border-bottom: 6px solid #000; background: rgb(223, 180, 125); z-index: 1000;
}
.chopper-lip:before { position: absolute; top: -20%; left: -60%; width: 180%; height: 80%; background: rgb(223, 180, 125); -webkit-transform: rotate(-40deg); -moz-transform: rotate(-40deg); -ms-transform: rotate(-40deg); -o-transform: rotate(-40deg); z-index: 1002; content: '';
}
.chopper-left-lip { left: 29.5%; border-radius: 50%; -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -ms-transform: rotate(20deg); -o-transform: rotate(20deg);
}
.chopper-right-lip { right: 29%; border-radius: 50%; -webkit-transform: rotate(55deg); -moz-transform: rotate(55deg); -ms-transform: rotate(55deg); -o-transform: rotate(55deg);
}
.chopper-mouth { overflow: hidden; position: absolute; top: 101%; left: 39.5%; width: 17%; height: 80%; border: 6px solid #000; border-radius: 50% / 30% 30% 70% 70%; background: #7e4031; z-index: 999;
}
.chopper-mouth:after { position: absolute; top: 36%; left: -18%; width: 120%; height: 80%; border-radius: 45%; border: 6px solid #000; background: #df8968; content: '';
}
.chopper-face:hover .chopper-mouth { top: 120%; left: 0; width: 95%; height: 45%; border-radius: 42%;
}
.chopper-face:hover .chopper-lip { display: none;
}
.chopper-face:hover .chopper-lip-cry { position: absolute; top: 92%; left: 25%; width: 50%; height: 80%; border-top: 3px solid #000; border-radius: 50%; z-index: 9999;
}
.chopper-face:hover .chopper-lip-cry:before { position: absolute; top: 20%; left: -9%; width: 120%; height: 25%; border-bottom: 2px solid #000; border-radius: 50% / 30% 30% 80% 70%; background: rgb(223, 180, 125); content: '';
}
.chopper-face:hover .chopper-lip-cry:after { position: absolute; top: 80%; left: 6%; width: 90%; height: 30%; border-top: 2px solid #000; border-radius: 50% / 80% 80% 10% 10%; background: rgb(223, 180, 125); content: '';
}
.chopper-face:hover .chopper-mouth { overflow: hidden; border-width: 1px; border-radius: 50% / 50% 50% 30% 30%; box-shadow: 0 0 0 8px rgb(223, 180, 125), 0 0 0 10px #000; background: #FFF;
}
.chopper-face:hover .chopper-mouth:after { display: none;
}
.chopper-face:hover .chopper-mouth ul { width: 100%; height: 100%;
}
.chopper-face:hover .chopper-mouth ul:before { display: block; position: absolute; top: 43%; left: 0; width: 100%; height: 22%; border-top: 2px solid #000; border-bottom: 2px solid #000; background: #7c412f; content: '';
}
.chopper-face:hover .chopper-mouth ul:after { display: block; position: absolute; top: 44%; left: 22%; width: 60%; height: 22%; border-top: 2px solid #000; border-bottom: 2px solid #000; border-radius: 50% / 80% 80% 20% 20%; background: #df8968; content: '';
}
.chopper-face:hover .chopper-mouth li:first-child { border: 0;
}
.chopper-face:hover .chopper-mouth li { display: inline-block; width: 11.8%; height: 100%; border-left: 3px solid #000; z-index: 99999999;
}
| Developer | AaronChuo (小狂) |
| Username | aaronchuo |
| Uploaded | September 11, 2022 |
| Rating | 4 |
| Size | 3,905 Kb |
| Views | 24,288 |
Do you need developer help for Chopper by pure CSS, no image, no javascript?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
AaronChuo (小狂) (aaronchuo) Script Codes
| Name | Size |
| BBQ by pure CSS, no image, no javascript | 8,395 Kb |
| Scifi-style Radio-based Tab | 4,427 Kb |
| Gradient Color Spin | 2,986 Kb |
| The Heart | 2,405 Kb |
| Wave | 3,550 Kb |
| Apple Watch Bubble-like UI | 3,765 Kb |
| Happy Birthday to Me | 4,549 Kb |
| Glitch Image | 6,535 Kb |
| I drink and I know things | 2,218 Kb |
| Animated Donut Chart | 4,147 Kb |
Create amazing blog posts with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| About Mazano | Kiti | 2,585 Kb |
| Navier Stoke Fluid Simulation | Esimov | 8,584 Kb |
| Material Design-Layout-Principles Practice | Fraina | 2,331 Kb |
| Arrow Navigation | Hinducows | 1,973 Kb |
| Filtre ile Arama Kutusu - Search Box with Filter | AyhanALTINOK | 3,448 Kb |
| Static Image to Video Block | Grayghostvisuals | 4,864 Kb |
| Eunice A | Ejbronze | 2,203 Kb |
| A Pen by Alexandru Pora | Axpro | 1,615 Kb |
| A Pen by boilzzz | Boilzzz | 2,761 Kb |
| Drag n Drop | Martin42 | 2,594 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!