CSS3 企鹅
2021-04-10 本文已影响0人
小碗吃不了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html,
body,
div,
strong {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
}
.wrap {
width: 600px;
margin: 50px auto 0;
position: relative;
}
.headtop {
width: 240px;
height: 110px;
background: #000;
margin: 0 auto;
border-top-left-radius: 120px 110px;
border-top-right-radius: 120px 110px;
position: relative;
z-index: 999;
}
.headbottom {
width: 240px;
height: 90px;
background: #000;
border-bottom-left-radius: 120px 90px;
border-bottom-right-radius: 120px 90px;
position: absolute;
top: 110px;
z-index: 1;
}
h1 {
position: absolute;
}
.lefteye {
width: 46px;
height: 70px;
background: #fff;
border-radius: 50% 50%;
position: absolute;
top: 30px;
left: 64px;
z-index: 2;
}
.lefteye_in {
width: 20px;
height: 30px;
background: #000;
border-radius: 50% 50%;
margin-left: 23px;
margin-top: 20px;
}
.eyeshow {
display: block;
width: 8px;
height: 10px;
border-radius: 50% 50%;
background: #fff;
position: absolute;
top: 26px;
left: 32px;
}
.righteye {
width: 46px;
height: 70px;
background: #fff;
border-radius: 50% 50%;
position: absolute;
top: 30px;
left: 130px;
z-index: 2;
}
.righteye_in {
width: 19px;
height: 23px;
background: #000;
border-top-left-radius: 17px 30px;
border-top-right-radius: 17px 30px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border: 1px solid #000;
margin-left: 7px;
margin-top: 16px;
}
.eyebai {
display: block;
width: 12px;
height: 19px;
border-top-left-radius: 5px 14px;
border-top-right-radius: 8px 14px;
background: #fff;
margin-top: 10px;
margin-left: 4px;
}
.mouth {
width: 158px;
height: 56px;
background: #FFA600;
border-radius: 50%;
position: absolute;
top: 106px;
left: 42px;
z-index: 2;
}
.mouth_bar {
width: 126px;
height: 30px;
background: #000;
position: absolute;
top: 142px;
left: 55px;
z-index: 2;
border-bottom-left-radius: 76px 96px;
border-bottom-right-radius: 76px 96px;
}
.mouth_bar1 {
width: 126px;
height: 20px;
background: #ffa600;
position: absolute;
z-index: 3;
border-bottom-left-radius: 104px 32px;
border-bottom-right-radius: 104px 32px;
}
.body {
width: 276px;
height: 260px;
background: #000;
position: absolute;
top: 142px;
left: 167px;
border-top-left-radius: 160px 140px;
border-bottom-left-radius: 160px 140px;
border-top-right-radius: 160px 140px;
border-bottom-right-radius: 160px 140px;
z-index: 2;
}
.body_1 {
width: 264px;
height: 137px;
background: #ff0000;
border: 5px solid #000;
border-top-left-radius: 195px 100px;
border-bottom-left-radius: 237px 146px;
border-top-right-radius: 195px 100px;
border-bottom-right-radius: 269px 146px;
position: absolute;
bottom: 159px;
left: 0px;
}
.body_2 {
width: 249px;
height: 139px;
position: absolute;
background: #000;
top: -33px;
left: 7px;
border-radius: 50%;
border: 1px #000 solid;
}
.body_3 {
width: 241px;
height: 145px;
position: absolute;
background: red;
top: 0px;
left: 5px;
border-radius: 50%;
}
.tummy {
width: 240px;
height: 240px;
background: #fff;
position: absolute;
top: 11px;
left: 17px;
border-radius: 50%;
}
.pocket {
width: 58px;
height: 78px;
position: absolute;
top: 72px;
left: 19px;
border: 3px solid #000;
background: red;
border-top-left-radius: 20px 52px;
border-bottom-left-radius: 40px 40px;
border-top-right-radius: 0px 0px;
border-bottom-right-radius: 21px 21px;
}
.pocket .pocket_line1 {
width: 11px;
height: 43px;
border-bottom-left-radius: 29px 57px;
border-top-left-radius: 0px 0px;
border: 9px solid #000;
border-top: none;
border-right: none;
position: absolute;
top: 0px;
left: 30px;
-webkit-transform: rotateZ(10deg);
-moz-transform: rotateZ(10deg);
-ms-transform: rotateZ(10deg);
-o-transform: rotateZ(10deg);
transform: rotateZ(10deg);
}
.pocket .pocket_line2 {
width: 2px;
height: 45px;
border-bottom-left-radius: 11px 24px;
border-top-left-radius: 10px 15px;
border: 9px solid red;
border-top: none;
border-right: none;
position: absolute;
top: 0px;
left: 2px;
}
.lefthand,
.righthand {
width: 49px;
height: 160px;
background: #000;
position: absolute;
}
.lefthand {
top: 20px;
left: -29px;
border-top-left-radius: 89px 166px;
border-top-right-radius: 6px 63px;
border-bottom-left-radius: 85px 194px;
border-bottom-right-radius: 40px 128px;
-webkit-transform: rotateZ(20deg);
-moz-transform: rotateZ(20deg);
-ms-transform: rotateZ(20deg);
-o-transform: rotateZ(20deg);
transform: rotateZ(20deg);
-webkit-animation: left_rotate 0.5s infinite;
-moz-animation: left_rotate 0.5s infinite;
-ms-animation: left_rotate 0.5s infinite;
-o-animation: left_rotate 0.5s infinite;
animation: left_rotate 0.5s infinite;
-webkit-animation-direction: alternate;
-moz-animation-direction: alternate;
-ms-animation-direction: alternate;
-o-animation-direction: alternate;
animation-direction: alternate;
}
.righthand {
top: 20px;
left: 258px;
border-top-right-radius: 89px 166px;
border-bottom-right-radius: 85px 194px;
border-top-left-radius: 6px 63px;
border-bottom-left-radius: 40px 128px;
-webkit-transform: rotateZ(-20deg);
-moz-transform: rotateZ(-20deg);
-ms-transform: rotateZ(-20deg);
-o-transform: rotateZ(-20deg);
transform: rotateZ(-20deg);
-webkit-animation: right_rotate 0.5s infinite;
-moz-animation: right_rotate 0.5s infinite;
-ms-animation: right_rotate 0.5s infinite;
-o-animation: right_rotate 0.5s infinite;
animation: right_rotate 0.5s infinite;
-webkit-animation-direction: alternate;
-moz-animation-direction: alternate;
-ms-animation-direction: alternate;
-o-animation-direction: alternate;
animation-direction: alternate;
}
.footer .left_footer,
.footer .right_footer {
width: 134px;
height: 74px;
position: absolute;
background: #ffa600;
border: 3px solid #000;
border-radius: 50%;
z-index: 1;
}
.footer .left_footer {
top: 347px;
left: 163px;
}
.footer .right_footer {
top: 347px;
left: 320px;
}
@keyframes left_rotate {
from {
-webkit-transform-origin: right 30%;
-webkit-transform: rotateZ(60deg);
}
to {
-webkit-transform-origin: right 30%;
-webkit-transform: rotateZ(30deg);
}
}
@keyframes right_rotate {
from {
-webkit-transform-origin: left 30%;
-webkit-transform: rotateZ(-60deg);
}
to {
-webkit-transform-origin: left 30%;
-webkit-transform: rotateZ(-30deg);
}
}
@-webkit-keyframes left_rotate {
from {
-webkit-transform-origin: right 30%;
-webkit-transform: rotateZ(60deg);
}
to {
-webkit-transform-origin: right 30%;
-webkit-transform: rotateZ(30deg);
}
}
@-webkit-keyframes right_rotate {
from {
-webkit-transform-origin: left 30%;
-webkit-transform: rotateZ(-60deg);
}
to {
-webkit-transform-origin: left 30%;
-webkit-transform: rotateZ(-30deg);
}
}
@-moz-keyframes left_rotate {
from {
transform-origin: right 30%;
transform: rotateZ(60deg);
}
to {
transform-origin: right 30%;
transform: rotateZ(30deg);
}
}
@-moz-keyframes right_rotate {
from {
transform-origin: left 30%;
transform: rotateZ(-60deg);
}
to {
transform-origin: left 30%;
transform: rotateZ(-30deg);
}
}
@-ms-keyframes left_rotate {
from {
transform-origin: right 30%;
transform: rotateZ(60deg);
}
to {
transform-origin: right 30%;
transform: rotateZ(30deg);
}
}
@-ms-keyframes right_rotate {
from {
transform-origin: left 30%;
transform: rotateZ(-60deg);
}
to {
transform-origin: left 30%;
transform: rotateZ(-30deg);
}
}
@-o-keyframes left_rotate {
from {
transform-origin: right 30%;
transform: rotateZ(60deg);
}
to {
transform-origin: right 30%;
transform: rotateZ(30deg);
}
}
@-o-keyframes right_rotate {
from {
transform-origin: left 30%;
transform: rotateZ(-60deg);
}
to {
transform-origin: left 30%;
transform: rotateZ(-30deg);
}
}
</style>
</head>
<body>
<div class="wrap">
<!-- 企鹅头部 -->
<div class="headtop">
<div class="headbottom"></div>
<!-- 眼睛部分 -->
<h1 class="lefteye">
<p class="lefteye_in">
<strong class="eyeshow"></strong>
</p>
</h1>
<h1 class="righteye">
<p class="righteye_in">
<strong class="eyebai"></strong>
</p>
</h1>
<!-- 嘴巴部分 -->
<h1 class="mouth"></h1>
<p class="mouth_bar">
<strong class="mouth_bar1"></strong>
</p>
</div>
<!-- 企鹅头部 -->
<!-- 企鹅身体 -->
<div class="body">
<div class="tummy">
<div class="pocket">
<div class="pocket_line1">
<div class="pocket_line2"></div>
</div>
</div>
</div>
<div class="hand">
<div class="lefthand"></div>
<div class="righthand"></div>
</div>
<div class="body_1">
<div class="body_2">
<div class="body_3"></div>
</div>
</div>
</div>
<!-- 企鹅脚丫 -->
<div class="footer">
<div class="left_footer"></div>
<div class="right_footer"></div>
</div>
</div>
</body>
</html>
