Skip to content

Instantly share code, notes, and snippets.

@sueannioanis

sueannioanis/Chopper-by-pure-CSS,-no-image,-no-javascript.markdown

Created September 17, 2014 17:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save sueannioanis/5dfc0b934b6136728efb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sueannioanis/5dfc0b934b6136728efb to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by AaronChuo (小狂).
Raw
Chopper-by-pure-CSS,-no-image,-no-javascript.markdown
Raw
index.html
<!--滑鼠移上去看看喬巴的反應吧！-->
<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>
Raw
style.css
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment