CSS
語言：
CSSSCSS
确定
*,
*:before,
*:before {
box-sizing: border-box;
margin: 0;
padding: 0;
}
::-webkit-scrollbar {
width: 0.5em;
height: 0.5em;
}
::-webkit-scrollbar-thumb {
background: slategray;
}
::-webkit-scrollbar-track {
background: #b8c0c8;
}
body {
scrollbar-face-color: slategray;
scrollbar-track-color: #b8c0c8;
}
body {
height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: teal;
}
.container {
width: 600px;
height: 600px;
top: auto;
right: auto;
bottom: auto;
left: auto;
position: absolute;
}
@media screen and (max-width: 599px) {
.container {
width: 300px;
height: 300px;
}
}
.red {
width: 91%;
height: 91%;
top: 0%;
right: 5.5%;
bottom: 0%;
left: 5.5%;
position: absolute;
margin: auto;
}
.head {
width: 83%;
height: 77%;
border-radius: 50%;
border-radius: 45% 55% 45% 45%/55% 60% 40% 45%;
top: 15%;
right: 0;
bottom: 0;
left: 12%;
position: absolute;
border: 10px solid #000;
background-color: #D6002D;
-webkit-transform: rotate(7deg);
transform: rotate(7deg);
box-shadow: inset -18px 8px 15px -5px rgba(237, 178, 144, 0.5);
overflow: hidden;
z-index: 10;
}
.head:before {
content: "";
position: absolute;
height: 100%;
width: 100%;
box-shadow: inset 10px -10px 3px 2px rgba(0, 0, 0, 0.2);
border-radius: inherit;
}
.head:after {
content: "";
top: 65%;
right: 0;
bottom: 0;
left: 25%;
position: absolute;
width: 100%;
height: 100%;
border-radius: inherit;
background: #E2C4A8;
}
.head .peak {
top: 57%;
right: 0;
bottom: 0;
left: 58%;
position: absolute;
width: 26%;
height: 28%;
background-color: #FBBA1E;
z-index: 60;
border: 1px solid #000000;
border-radius: 20% 0 20% 10%;
-webkit-transform: rotate(45deg) skew(-15deg, 0deg);
transform: rotate(45deg) skew(-15deg, 0deg);
box-shadow: 0px 0px 0px 6px black, inset 0 5px 6px 0 rgba(255, 255, 255, 0.3), inset 2px -4px 10px 0px rgba(0, 0, 0, 0.4);
}
.head .peak:before {
content: "";
top: -30%;
right: 0;
bottom: 0;
left: 14%;
position: absolute;
width: 48%;
height: 150%;
border-radius: 0 0 40% 0;
border: 5px solid #000000;
border-color: transparent #000000 transparent transparent;
-webkit-transform: rotate(42deg);
transform: rotate(42deg);
}
.eye-left,
.eye-right {
width: 21%;
height: 21%;
top: 40%;
right: auto;
bottom: auto;
left: auto;
position: absolute;
background-color: #fff;
border-radius: 50%;
}
.eye-left {
position: absolute;
left: 48.5%;
box-shadow: 8px -9px 10px 0 rgba(0, 0, 0, 0.3) inset, -8px 3px 0 0 black, -5px 8px 0 0 black, 5px 4px 0 0 black, -8px 3px 0 0 black inset, -9px 5px 5px rgba(0, 0, 0, 0.1), -10px 6px 5px rgba(0, 0, 0, 0.1), -11px 7px 5px rgba(0, 0, 0, 0.1), -12px 8px 5px rgba(0, 0, 0, 0.1), -13px 9px 5px rgba(0, 0, 0, 0.1), -14px 9px 5px rgba(0, 0, 0, 0.1), -15px 10px 5px rgba(0, 0, 0, 0.1), -16px 11px 5px rgba(0, 0, 0, 0.1), -17px 12px 5px rgba(0, 0, 0, 0.1), -18px 13px 5px rgba(0, 0, 0, 0.1), -19px 14px 5px rgba(0, 0, 0, 0.1), -20px 15px 5px rgba(0, 0, 0, 0.1);
}
.eye-left--pupil {
right: 15%;
width: 35%;
height: 35%;
top: 35%;
}
.eye-left .eyebrow {
-webkit-transform: skewY(20deg);
transform: skewY(20deg);
left: -28%;
top: -18%;
}
.eye-right {
position: absolute;
right: 10%;
box-shadow: -8px -9px 10px 0 rgba(0, 0, 0, 0.3) inset, 8px 3px 0 0 black, 5px 8px 0 0 black, 8px 3px 0 0 black inset, 9px 5px 5px rgba(0, 0, 0, 0.1), 10px 6px 5px rgba(0, 0, 0, 0.1), 11px 7px 5px rgba(0, 0, 0, 0.1), 12px 8px 5px rgba(0, 0, 0, 0.1), 13px 9px 5px rgba(0, 0, 0, 0.1), 14px 9px 5px rgba(0, 0, 0, 0.1), 15px 10px 5px rgba(0, 0, 0, 0.1), 16px 11px 5px rgba(0, 0, 0, 0.1), 17px 12px 5px rgba(0, 0, 0, 0.1), 18px 13px 5px rgba(0, 0, 0, 0.1), 19px 14px 5px rgba(0, 0, 0, 0.1), 20px 15px 5px rgba(0, 0, 0, 0.1);
}
.eye-right--pupil {
width: 30%;
height: 30%;
top: 38%;
left: 20%;
}
.eye-right .eyebrow {
-webkit-transform: skewY(-16deg);
transform: skewY(-16deg);
top: -13%;
}
.eye-left--pupil,
.eye-right--pupil {
background-color: #000;
border-radius: 50%;
position: absolute;
}
.eye-left .eyebrow,
.eye-right .eyebrow {
width: 130%;
height: 45%;
background-color: #000;
position: absolute;
}
.hair {
width: 13%;
height: 35%;
top: -5%;
right: 38%;
bottom: auto;
left: auto;
position: absolute;
background-color: #D6002D;
border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;
-webkit-transform: rotate(-50deg);
transform: rotate(-50deg);
border: 10px solid black;
border-bottom-color: transparent;
z-index: 10;
}
.hair:before {
content: "";
width: 130%;
height: 100%;
background-color: #D6002D;
position: absolute;
left: -140%;
bottom: 25%;
border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;
border: 10px solid black;
border-bottom-color: transparent;
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
z-index: -1;
}
@media screen and (max-width: 599px) {
.hair:before {
border: 7px solid black;
-webkit-transform: rotate(-23deg);
transform: rotate(-23deg);
}
}
.tail {
width: 0;
height: 0;
position: absolute;
top: 32%;
left: 17%;
border-top: 120px solid black;
border-bottom: 120px solid transparent;
border-right: 22px solid transparent;
border-left: 22px solid transparent;
-webkit-transform: rotate(-70deg);
transform: rotate(-70deg);
border-radius: 30% 30%;
}
.tail:before,
.tail:after {
content: "";
width: 0;
height: 0;
position: absolute;
display: block;
border-top: 70px solid black;
border-bottom: 70px solid transparent;
border-right: 22px solid transparent;
border-left: 22px solid transparent;
border-radius: 50% 50% 0 0 / 50% 50% 40% 40%;
}
.tail:before {
top: -100px;
left: -20px;
-webkit-transform: rotate(35deg);
transform: rotate(35deg);
}
.tail:after {
left: -25px;
top: -100px;
-webkit-transform: rotate(-35deg);
transform: rotate(-35deg);
}
@media screen and (max-width: 599px) {
.tail {
border-top: 80px solid black;
border-bottom: 80px solid transparent;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
}
.tail:after,
.tail:before {
border-top: 40px solid black;
border-bottom: 40px solid transparent;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
position: absolute;
}
.tail:before {
left: -6px;
top: -70px;
}
.tail:after {
left: -14px;
top: -70px;
}
}
.freckles {
width: 10%;
height: 15%;
position: absolute;
top: 56%;
left: 15%;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.freckles-2 {
width: 10%;
height: 20%;
position: absolute;
top: 50%;
left: 30%;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(2deg);
transform: rotate(2deg);
}