HTML
<!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>Animal</title>
<link rel="stylesheet" href="animal.css">
</head>
<body>
<div class="pig">
<!-- 耳朵 -->
<div class="ear_left"></div>
<div class="ear_right"></div>
<!-- 眼睛 -->
<div class="eye_left"></div>
<div class="eye_right"></div>
<!-- 鼻子 -->
<div class="nose"></div>
<div class="nose_left"></div>
<div class="nose_right"></div>
</div>
<div class="mouse">
<!-- 耳朵 -->
<div class="mouse_ear_left"></div>
<div class="mouse_ear_right"></div>
<div class="mouse_ear_left_in"></div>
<div class="mouse_ear_right_in"></div>
<!-- 眼睛 -->
<div class="eye_left_outer"></div>
<div class="eye_right_outer"></div>
<div class="eye_left_in"></div>
<div class="eye_right_in"></div>
<!-- 鼻子 -->
<div class="nose_trigon"></div>
<!-- 胡须 -->
<div class="beard_left_one"></div>
<div class="beard_left_two"></div>
<div class="beard_left_three"></div>
<div class="beard_right_one"></div>
<div class="beard_right_two"></div>
<div class="beard_right_three"></div>
<!-- 牙齿 -->
<div class="tooth_feft"></div>
<div class="tooth_right"></div>
</div>
<div class="cow">
<!-- 耳朵 -->
<div class="cow_ear_left"></div>
<div class="cow_ear_right"></div>
<div class="cow_face">
<!-- 眼睛 -->
<div class="cow_eye_left_outer"></div>
<div class="cow_eye_right_outer"></div>
<div class="cow_eye_left_in"></div>
<div class="cow_eye_right_in"></div>
<!-- 鼻子 -->
<div class="cow_nose"></div>
<div class="cow_nose_left"></div>
<div class="cow_nose_right"></div>
<!-- 斑点 -->
<div class="spot_box"></div>
<div class="spot_box1"></div>
<div class="spot_box2"></div>
<div class="spot_box3"></div>
<div class="spot_box4"></div>
<!-- 嘴 -->
<div class="drunk"></div>
</div>
<!-- 草 -->
<div class="grass_box"></div>
<div class="grass_box1"></div>
<div class="grass_box2"></div>
<div class="grass_box3"></div>
<div class="grass_box4"></div>
<div class="grass_box5"></div>
<div class="grass_box6"></div>
<div class="grass_box7"></div>
<div class="grass_box8"></div>
</div>
</body>
</html>
css
body {
width: 100%;
height: 12000px;
margin: 0 auto;
background: skyblue;
}
/* 猪 */
.pig {
position: relative;
float: left;
margin: 52px;
width: 240px;
height: 240px;
background: #fa8cc8;
border-radius: 120px;
}
.ear_left {
position: absolute;
width: 0;
height: 0;
border-top: 0px solid transparent;
border-right: 25px solid transparent;
border-bottom: 35px solid #d30073;
border-left: 25px solid transparent;
transform: rotate(-22deg);
left: 30px;
top: 8px;
}
.ear_right {
position: absolute;
width: 0;
height: 0;
border-top: 0px solid transparent;
border-right: 25px solid transparent;
border-bottom: 35px solid #d30073;
border-left: 25px solid transparent;
transform: rotate(22deg);
right: 30px;
top: 8px;
}
.eye_left {
position: absolute;
width: 15px;
height: 30px;
background: #000;
border-radius: 10px;
top: 70px;
left: 80px;
}
.eye_right {
position: absolute;
width: 15px;
height: 30px;
background: #000;
border-radius: 10px;
top: 70px;
right: 80px;
}
.nose {
position: absolute;
width: 90px;
height: 60px;
background: #fa4eac;
border-radius: 50%;
top: 120px;
left: 50%;
margin-left: -45px;
}
.nose_left {
position: absolute;
width: 18px;
height: 40px;
background: #e01b87;
border-radius: 45%;
top: 130px;
left: 92px;
}
.nose_right {
position: absolute;
width: 18px;
height: 40px;
background: #e01b87;
border-radius: 45%;
top: 130px;
right: 92px;
}
/* 鼠 */
.mouse {
position: relative;
float: left;
margin-top: 52px;
margin-left: 52px;
width: 240px;
height: 240px;
background: #8f9595;
border-radius: 120px;
}
.mouse_ear_left {
float: left;
position: relative;
width: 100px;
height: 100px;
background: #6e6e6e;
border-radius: 50%;
margin-top: -20px;
margin-left: -10px;
}
.mouse_ear_right {
position: relative;
float: right;
width: 100px;
height: 100px;
background: #6e6e6e;
border-radius: 50%;
margin-top: -20px;
margin-right: -10px;
}
.mouse_ear_left_in {
/* float: left; */
position: relative;
width: 70px;
height: 70px;
background: #e5a95f;
border-radius: 50%;
margin-top: -5px;
margin-left: 5px;
}
.mouse_ear_right_in {
float: right;
position: relative;
width: 70px;
height: 70px;
background: #e5a95f;
border-radius: 50%;
margin-top: -85px;
margin-right: 5px;
}
.eye_left_outer {
position: absolute;
width: 45px;
height: 45px;
background: #fff;
border-radius: 50%;
margin-left: 55px;
margin-top: 7px;
}
.eye_right_outer {
/* position: absolute; */
float:right;
width: 45px;
height: 45px;
background: #fff;
border-radius: 50%;
margin-right: 55px;
margin-top: -7px;
}
.eye_left_in {
position: absolute;
width: 15px;
height: 15px;
background: #000;
border-radius: 50%;
top: 98px;
left: 70px;
}
.eye_right_in {
position: absolute;
width: 15px;
height: 15px;
background: #000;
border-radius: 50%;
top: 98px;
right: 70px;
}
.nose_trigon {
position: absolute;
width: 0;
height: 0;
border-top: 50px solid #6e6e6e;
border-right: 25px solid transparent;
border-bottom: 0px solid #6e6e6e;
border-left: 25px solid transparent;
top: 120px;
left: 50%;
margin-left: -25px;
margin-top: 14px;
}
/* 左边胡须 */
.beard_left_one {
position: absolute;
width: 60px;
height: 2px;
background: #000;
border-radius: 30%;
transform: rotate(10deg);
top: 139px;
left: 42px;
}
.beard_left_two {
position: absolute;
width: 58px;
height: 1px;
background: #000;
border-radius: 30%;
/* transform: rotate(10deg); */
top: 145px;
left: 42px;
}
.beard_left_three {
position: absolute;
width: 60px;
height: 2px;
background: #000;
border-radius: 30%;
transform: rotate(350deg);
top: 150px;
left: 42px;
}
/* 右边胡须 */
.beard_right_one {
position: absolute;
width: 60px;
height: 2px;
background: #000;
border-radius: 30%;
transform: rotate(-10deg);
top: 139px;
right: 42px;
}
.beard_right_two {
position: absolute;
width: 58px;
height: 1px;
background: #000;
border-radius: 30%;
/* transform: rotate(10deg); */
top: 145px;
right: 43px;
}
.beard_right_three {
position: absolute;
width: 60px;
height: 2px;
background: #000;
border-radius: 30%;
transform: rotate(-350deg);
top: 150px;
right: 42px;
}
/* 牙齿 */
.tooth_feft {
position: absolute;
width: 16px;
height: 25px;
background: #fff;
transform: rotate(10deg);
top: 200px;
left: 102px;
}
.tooth_right {
position: absolute;
width: 16px;
height: 25px;
background: #fff;
transform: rotate(-10deg);
top: 200px;
right: 102px;
}
/* 牛 */
.cow {
position: relative;
margin-right: 500px;
margin-top: 52px;
float: right;
width: 240px;
height: 240px;
background: #fff;
border-radius: 50%;
}
.cow_face {
position: relative;
overflow: hidden;
/* margin-right: 500px; */
/* margin-top: 52px; */
float: right;
width: 240px;
height: 240px;
background: #fff;
border-radius: 50%;
}
/* 耳朵 */
.cow_ear_left {
position: absolute;
width: 18px;
height:40px;
border-radius: 6px 6px 0 0;
background: #000;
transform: rotate(-35deg);
top: 2px;
left: 34px;
z-index: 2;
}
.cow_ear_right {
position: absolute;
width: 18px;
height:40px;
border-radius: 6px 6px 0 0;
background: #000;
transform: rotate(35deg);
top: 2px;
right: 34px;
z-index: 2;
}
/* 眼睛 */
.cow_eye_left_outer {
position: absolute;
width: 50px;
height: 50px;
border: 1px solid #000;
border-radius: 50%;
top: 52px;
left: 58px;
}
.cow_eye_right_outer {
position: absolute;
width: 50px;
height: 50px;
border: 1px solid #000;
border-radius: 50%;
top: 52px;
right: 58px;
}
.cow_eye_left_in {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background: #000;
top: 80px;
left: 74px;
}
.cow_eye_right_in {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background: #000;
top: 80px;
right: 74px;
}
/* 鼻子 */
.cow_nose {
position: absolute;
width: 90px;
height: 60px;
background: #e5a95f;
border-radius: 50%;
top: 110px;
left: 50%;
margin-left: -45px;
}
.cow_nose_left {
position: absolute;
width: 18px;
height: 40px;
background: #8c6a3f;
border-radius: 45%;
top: 120px;
left: 92px;
}
.cow_nose_right {
position: absolute;
width: 18px;
height: 40px;
background: #8c6a3f;
border-radius: 45%;
top: 120px;
right: 92px;
}
.spot_box {
position: absolute;
width: 50px;
height: 50px;
background: #000;
border-radius: 50%;
top: 95px;
left:-1px;
}
.spot_box1 {
position: absolute;
width: 35px;
height: 50px;
background: #000;
border-radius: 50%;
transform: rotate(-25deg);
top: 110px;
left:-5px;
}
.spot_box2 {
position: absolute;
width: 40px;
height: 40px;
background: #000;
border-radius: 50%;
/* transform: rotate(-25deg); */
top: -2px;
left:116px;
}
.spot_box3 {
position: absolute;
width: 25px;
height: 40px;
background: #000;
border-radius: 50%;
transform: rotate(70deg);
top: -10px;
left:110px;
}
.spot_box4 {
position: absolute;
width: 25px;
height: 40px;
background: #000;
border-radius: 25px;
transform: rotate(15deg);
top: 110px;
right: 2px;
}
/* 嘴 */
.drunk {
position: absolute;
width: 50px;
height: 20px;
/* background: #000; */
border-radius: 25px;
border: 1px solid #000;
top: 190px;
right: 60px;
}
/* 草 */
.grass_box{
position: absolute;
width: 10px;
height: 90px;
background: #399200;
border-radius: 2px;
transform: rotate(10deg);
/* border: 1px solid #000; */
top: 192px;
right: 108px;
}
.grass_box1 {
position: absolute;
width: 10px;
height: 90px;
background: #399200;
border-radius: 2px;
/* transform: rotate(10deg); */
/* border: 1px solid #000; */
top: 192px;
right: 90px;
}
.grass_box2{
position: absolute;
width: 10px;
height: 90px;
background: #399200;
border-radius: 2px;
transform: rotate(-10deg);
/* border: 1px solid #000; */
top: 192px;
right: 80px;
}
.grass_box3{
position: absolute;
width: 10px;
height: 90px;
background: #399200;
border-radius: 2px;
transform: rotate(10deg);
/* border: 1px solid #000; */
top: 192px;
right: 75px;
}
.grass_box4{
position: absolute;
width: 10px;
height: 98px;
background: #399200;
border-radius: 2px;
transform: rotate(-28deg);
/* border: 1px solid #000; */
top: 188px;
right: 72px;
}
.grass_box5{
position: absolute;
width: 10px;
height: 90px;
background: #399200;
border-radius: 2px;
transform: rotate(-28deg);
/* border: 1px solid #000; */
top: 188px;
right: 52px;
}
.grass_box6{
position: absolute;
width: 10px;
height: 45px;
background: #5cba20;
border-radius: 2px;
transform: rotate(10deg);
/* border: 1px solid #000; */
top: 196px;
right: 96px;
}
.grass_box7{
position: absolute;
width: 10px;
height: 45px;
background: #5cba20;
border-radius: 2px;
/* transform: rotate(10deg); */
/* border: 1px solid #000; */
top: 196px;
right: 78px;
}
.grass_box8{
position: absolute;
width: 10px;
height: 45px;
background: #5cba20;
border-radius: 2px;
transform: rotate(-30deg);
/* border: 1px solid #000; */
top: 196px;
right: 78px;
}
以上是代码详细 不懂私信