用html+css+js画一个猫咪完整代码
时间: 2023-10-23 17:09:37 浏览: 52
以下是一个简单的猫咪的 HTML + CSS + JS 代码,你可以根据自己的需求进行修改。
HTML 代码:
```html
<div class="cat">
<div class="head">
<div class="ears">
<div class="ear"></div>
<div class="ear"></div>
</div>
<div class="face">
<div class="eyes">
<div class="eye"></div>
<div class="eye"></div>
</div>
<div class="nose"></div>
<div class="mouth"></div>
</div>
</div>
<div class="body"></div>
<div class="legs">
<div class="leg"></div>
<div class="leg"></div>
<div class="leg"></div>
<div class="leg"></div>
</div>
<div class="tail"></div>
</div>
```
CSS 代码:
```css
.cat {
position: relative;
width: 200px;
height: 150px;
transform: rotateY(-180deg);
}
.head {
position: absolute;
left: 50%;
top: 20px;
transform: translateX(-50%);
}
.ears {
position: relative;
width: 100%;
height: 50px;
}
.ear {
position: absolute;
width: 25px;
height: 40px;
background-color: #333;
border-radius: 50% 50% 0 0;
transform: rotate(-45deg);
}
.ear:first-child {
left: -10px;
transform-origin: 100% 100%;
}
.ear:last-child {
right: -10px;
transform-origin: 0 100%;
}
.face {
position: relative;
width: 100%;
height: 80px;
border-radius: 50% 50% 40% 40%;
background-color: #333;
}
.eyes {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.eye {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
background-color: white;
border-radius: 50%;
margin: 5px;
}
.eye::before {
content: "";
position: absolute;
width: 10px;
height: 10px;
background-color: black;
border-radius: 50%;
top: 3px;
left: 3px;
}
.nose {
position: absolute;
width: 20px;
height: 20px;
background-color: pink;
border-radius: 50%;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.mouth {
position: absolute;
width: 50px;
height: 10px;
background-color: pink;
border-radius: 50%;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
}
.body {
position: absolute;
top: 70px;
left: 10%;
width: 80%;
height: 80px;
background-color: #333;
border-radius: 50% 50% 30% 30%;
}
.legs {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
}
.leg {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
background-color: #333;
border-radius: 50%;
margin: 5px;
}
.leg::before {
content: "";
position: absolute;
width: 10px;
height: 10px;
background-color: white;
border-radius: 50%;
top: 3px;
left: 3px;
}
.leg:first-child {
margin-left: 30%;
}
.leg:last-child {
margin-right: 30%;
}
.tail {
position: absolute;
bottom: 30px;
right: -20px;
width: 20px;
height: 80px;
background-color: #333;
border-radius: 50% 50% 0 0;
transform: rotate(-45deg);
}
```
JS 代码:
```javascript
// 可以加入动态效果,比如猫咪摇头摆尾等
```