<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery+CSS3卡通土豆表情DIY装扮特效</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style>
.hidden {
display: none !important;
}
body {
background-color: #583d4f;
color: #222;
font-family: arial, sans-serif;
font-size: 10pt;
line-height: 1.6;
margin: 0;
text-align: center;
}
nav {
background-color: #f8f8f8;
display: table;
height: 100vh;
width: 30vw;
}
@media (max-width: 1024px) {
nav {
width: 50vw;
}
}
main {
align-items: center;
display: flex;
height: 100vh;
justify-content: center;
position: absolute;
right: 0;
top: 0;
width: 70vw;
}
@media (max-width: 1024px) {
main {
width: 50vw;
}
}
.main-menu {
display: table-cell;
margin: 0;
padding: 0;
vertical-align: top;
width: 50%;
}
.main-menu li {
background-color: #806577;
border-bottom: 1px solid #6c5163;
color: #583d4f;
font-size: 8pt;
display: block;
height: 20vh;
list-type: none;
min-height: 100px;
position: relative;
}
.main-menu li.active {
background-color: #8a6f81;
}
.main-menu li .name {
bottom: 2.5px;
left: 0;
margin: auto;
position: absolute;
right: 0;
}
.main-menu li .current-type {
bottom: 25px;
height: calc(100% - 25px);
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 100%;
}
.main-menu li .current-type .menu-wrapper {
bottom: 0;
left: 0;
margin: auto;
right: 0;
top: 0;
}
@media (only max-width: 768px) {
.main-menu li .current-type {
transform: scale(0.6);
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
-ms-transform: scale(0.6);
}
}
.secondary-menu {
background-color: #6c5163;
display: table-cell;
width: 50%;
}
.secondary-menu ul {
height: 100vh;
margin: 0;
overflow-y: scroll;
padding: 0;
}
.secondary-menu ul.mouth li:first-child div {
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
}
.secondary-menu ul.mouth li div {
transform: scale(1.25);
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
-ms-transform: scale(1.25);
}
.secondary-menu ul li {
border-bottom: 1px solid #583d4f;
display: block;
height: 15vh;
list-style-type: none;
min-height: 100px;
min-width: 100px;
position: relative;
}
.secondary-menu ul li.active {
background-color: #624759;
}
.secondary-menu ul li .menu-wrapper {
bottom: 0;
left: 0;
margin: auto;
right: 0;
top: 0;
}
.menu-wrapper.cat-stuff {
height: 15vh;
padding: 10px 0;
width: 100px;
transform: scale(0.75);
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
-ms-transform: scale(0.75);
}
.menu-wrapper.cat-stuff .cat-ear {
top: 10px;
z-index: 1;
}
.menu-wrapper.eye-cute-wrapper, .menu-wrapper.eye-crazy-wrapper, .menu-wrapper.eye-afraid-wrapper {
left: 0;
margin: auto;
position: relative;
right: 0;
width: 30%;
}
.menu-wrapper.eye-cute-wrapper .left, .menu-wrapper.eye-crazy-wrapper .left, .menu-wrapper.eye-afraid-wrapper .left {
left: 0;
}
.menu-wrapper.eye-cute-wrapper .right, .menu-wrapper.eye-crazy-wrapper .right, .menu-wrapper.eye-afraid-wrapper .right {
right: 0;
}
.menu-wrapper.eye-simple-wrapper .left, .menu-wrapper.eye-happy-wrapper .left {
left: -5px;
}
.menu-wrapper.eye-simple-wrapper .right, .menu-wrapper.eye-happy-wrapper .right {
right: -5px;
}
.menu-wrapper.tie {
transform: scale(1.5);
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
}
.skin-tone {
height: 100%;
opacity: 0.5;
width: 100%;
}
.skin-tone.darker {
background-color: #dea76c;
}
.skin-tone.lighter {
background-color: #fcc58a;
}
.skin-tone.crazy {
background-color: #c679ae;
}
.skin-tone.regular {
background-color: #F2BB80;
}
/* css illustrations */
.potato-wrapper {
position: relative;
}
.potato {
background-color: #F2BB80;
border-radius: 75% 70% 60% 60%;
box-shadow: inset 10px 1px 7px #d49d62;
height: 150px;
position: relative;
width: 100px;
}
.potato.darker {
background-color: #dea76c;
box-shadow: inset 10px 1px 7px #c0894e;
}
.potato.lighter {
background-color: #fcc58a;
box-shadow: inset 10px 1px 7px #dea76c;
}
.potato.crazy {
background-color: #c679ae;
box-shadow: inset 10px 1px 7px #b2659a;
}
.potato-skin {
border-radius: 75% 70% 60% 60%;
height: 150px;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 100px;
}
.potato-skin.crazy .mancha-pequena {
background-color: #b76a9f;
}
.mancha-pequena {
background-color: #c58e53;
border-radius: 100%;
height: 4px;
position: absolute;
width: 4px;
}
.mancha-pequena.m1 {
left: 20px;
top: 20px;
}
.mancha-pequena.m2 {
left: 20px;
top: 90px;
}
.mancha-pequena.m3 {
left: 65px;
top: 130px;
}
.mancha-pequena.m4 {
left: 75px;
top: 70px;
}
.mancha-pequena.m5 {
left: 65px;
top: 12px;
}
.mancha-pequena.m6 {
left: 7px;
top: 110px;
}
.mancha-pequena.m7 {
left: 86px;
top: 97px;
}
.mancha-pequena.m8 {
left: 87px;
top: 104px;
}
.mancha-pequena.m9 {
left: 52px;
top: 10px;
}
.mancha-pequena.m10 {
left: 47px;
top: 137px;
}
.mancha-pequena.m11 {
left: 87px;
top: 104px;
}
.mancha-pequena.m12 {
left: 16px;
top: 100px;
}
.headphones {
border-top: 2px solid #e0e0e0;
border-radius: 100%;
height: 75px;
left: 12px;
position: absolute;
width: 78px;
}
.headphones:after {
background-color: #eee;
border-radius: 100% 0% 60% 100%;
content: '';
height: 15px;
left: -5px;
position: absolute;
top: 18px;
width: 6px;
transform: rotate(28deg);
-webkit-transform: rotate(28deg);
-moz-transform: rotate(28deg);
-ms-transform: rotate(28deg);
}
.headphones:before {
background-color: #eee;
border-radius: 0 100% 100% 60%;
content: '';
height: 15px;
left: 76px;
position: absolute;
top: 18px;
width: 6px;
transform: rotate(-23deg);
-webkit-transform: rotate(-23deg);
-moz-transform: rotate(-23deg);
-ms-transform: rotate(-23deg);
}
.cat-stuff {
position: relative;
}
.cat-stuff .cat-ear {
border-bottom: 46px solid #e8b176;
border-left: 21px solid transparent;
border-right: 21px solid transparent;
position: absolute;
top: -12px;
width: 0;
z-index: -1;
}
.cat-stuff .cat-ear:after {
border-bottom: 20px solid #ffedb2;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: '';
left: -9px;
position: absolute;
top: 14px;
width: 0;
}
.cat-stuff .cat-ear.left {
left: -2px;
transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
}
.cat-stuff .cat-ear.right {
right: -1px;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
}
.cat-stuff .cat-ear.right:after {
left: -8px;
top: 13px;
}
.cat-stuff .cat-whiskas {
background-color: #222;
height: 1px;
position: absolute;
top: 45px;
width: 15px;
}
.cat-stuff .cat-whiskas:after, .cat-stuff .cat-whiskas:before {
background-color: #222;
content: '';
height: 1px;
left: 0;
position: absolute;
top: 5px;
width: 15px;
}
.cat-stuff .cat-whiskas:before {
top: -5px;
}
.cat-stuff .cat-whiskas.left {
left: -5px;
}
.cat-stuff .cat-whiskas.left:after, .cat-stuff .left.cat-whiskas:before {
transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
}
.cat-stuff .cat-whiskas.left:before {
transform: rotate(15deg);
-
