Chopper by pure CSS, no image, no javascript

Size
3,905 Kb
Views
24,288

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;
}
Chopper by pure CSS, no image, no javascript - Script Codes
Chopper by pure CSS, no image, no javascript - Script Codes
Home Page Home
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
Create amazing love letters 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!