<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>机器猫</title>
</head>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.nav {
width: 400px;
height: 600px;
margin: 100px auto;
/* border: 1px solid black; */
}
/* 脑袋 */
.head {
width: 250px;
height: 250px;
border: 1px solid black;
background-color: rgb(7, 133, 230);
border-radius: 50%;
position: relative;
margin: auto;
}
.head>.head1 {
width: 240px;
height: 210px;
border: 1px solid black;
background-color: white;
position: absolute;
left: 5px;
top: 38px;
border-radius: 50% 50% 51% 49%;
}
/* 眼睛 */
.eye1,
.eye2 {
width: 60px;
height: 70px;
border: 1px solid black;
border-radius: 50%;
position: absolute;
background-color: white;
left: 122px;
top: 20px;
}
.eye2 {
left: 62px;
top: 20px;
}
.eye3,
.eye4 {
width: 30px;
height: 40px;
border: 1px solid black;
border-radius: 50%;
position: absolute;
background-color: rgb(31, 30, 29);
left: 137px;
top: 48px;
}
.eye4 {
left: 84px;
top: 48px;
}
.eye5,
.eye6 {
width: 8px;
height: 12px;
border: 1px solid black;
border-radius: 50%;
position: absolute;
background-color: rgb(244, 244, 248);
left: 153px;
top: 66px;
}
.eye6 {
left: 100px;
top: 66px;
}
/* 鼻子 */
.nose {
position: relative;
width: 35px;
height: 35px;
border-radius: 50%;
background-color: rgb(182, 50, 40);
left: 107px;
top: 70px;
}
.nose1 {
width: 9px;
height: 8px;
border-radius: 50%;
background-color: white;
position: absolute;
left: 11px;
top: 12px;
}
/* 嘴巴 */
.mouth {
width: 175px;
height: 95px;
border: 1px solid black;
border-top-color: transparent;
position: absolute;
border-radius: 0px 0px 90px 90px;
left: 36px;
top: 100px;
}
/* 胡须 */
.hu1,
.hu2,
.hu3,
.hu4,
.hu5,
.hu6,
.hu7 {
width: 80px;
border-top: 1px solid black;
position: absolute;
}
.hu1 {
left: 20px;
top: 100px;
transform: rotate(25deg);
}
.hu2 {
left: 20px;
top: 140px;
}
.hu3 {
left: 20px;
top: 180px;
transform: rotate(-25deg);
}
.hu4 {
left: 150px;
top: 100px;
transform: rotate(-25deg);
}
.hu5 {
left: 150px;
top: 140px;
}
.hu6 {
left: 150px;
top: 180px;
transform: rotate(25deg);
}
.hu7 {
border-width: 3px;
width: 90px;
left: 31%;
top: 60%;
transform: rotate(90deg);
}
/* 食物 */
.food {
width: 120px;
/* height: 200px; */
/* border: 1px solid black; */
position: relative;
left: 138px;
top: -234px;
/* box-sizing: 3; */
}
.food1,
.food2,
.food3 {
position: absolute;
border: 1px solid black;
}
.food1 {
width: 120px;
height: 90px;
border-radius: 50%;
background-color: rgb(239, 236, 205);
}
.food2 {
width: 120px;
height: 80px;
border-radius: 50%;
background-color: rgb(239, 236, 205);
}
.food3 {
width: 120px;
height: 70px;
border-radius: 50%;
background-color: rgb(188, 87, 57);
}
/* 身体 */
.body {
width: 160px;
height: 170px;
background-color: rgb(7, 133, 230);
position: relative;
left: 120px;
top: -10px;
}
.cont {
width: 100%;
height: 90%;
border-radius: 50%;
background-color: aliceblue;
border: 1px solid black;
}
/* 左右手躯干 */
.left,
.nigth {
width: 80px;
height: 55px;
border-radius: 50%;
background-color: rgb(7, 133, 230);
position: absolute;
border: 1px solid black;
}
.left {
left: -55px;
top: 8px;
transform: rotate(-45deg);
}
.nigth {
left: 122px;
top: 8px;
transform: rotate(45deg);
}
/* 左右手 */
.left1,
.nigth1 {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: wheat;
border: 1px solid black;
position: absolute;
}
.left1 {
top: -36px;
left: -15px;
z-index: 1;
}
.nigth1 {
top: -34px;
left: 108px;
z-index: 1;
}
/* 双脚 */
.foot1,
.foot2 {
width: 110px;
height: 130px;
border-radius: 50%;
background-color: rgb(226, 231, 236);
border: 1px solid black;
position: absolute;
z-index: 1;
}
.foot1 {
top: 49px;
left: -74px;
}
.foot2 {
top: 49px;
left: 100px;
}
/* 口袋 */
.kodai {
width: 100px;
height: 60px;
border: 1px solid black;
position: relative;
border-radius: 0px 0px 90px 90px;
left: 140px;
top: -110px;
}
</style>
<body>
<!-- 脑袋 -->
<div class="nav">
<div class="head">
<!-- 眼睛 -->
<div class="head1"></div>
<div class="eye1"></div>
<div class="eye2"></div>
<div class="eye3"></div>
<div class="eye4"></div>
<div class="eye5"></div>
<div class="eye6"></div>
<!-- 鼻子 -->
<div class="nose">
<div class="nose1"></div>
</div>
<!-- 嘴巴 -->
<div class="mouth"></div>
<!-- 胡子 -->
<div class="hu1"></div>
<div class="hu2"></div>
<div class="hu3"></div>
<div class="hu4"></div>
<div class="hu5"></div>
<div class="hu6"></div>
<div class="hu7"></div>
</div>
<!-- 身体 -->
<div class="body">
<div class="cont"></div>
<div class="duzi"></div>
<!-- 左右手躯干 -->
<div class="left"></div>
<div class="nigth"></div>
<!-- 左右手 -->
<div class="left1"></div>
<div class="nigth1"></div>
<!-- 脚 -->
<div class="foot1"></div>
<div class="foot2"></div>
</div>
<!-- 食物-->
<div class="food">
<div class="food1"></div>
<div class="food2"></div>
<div class="food3"></div>
</div>
<!-- 口袋 -->
<div class="kodai"></div>
</div>
</body>
</html>
哆啦A梦机器猫
最新推荐文章于 2024-08-17 14:58:02 发布