css3 画一个机器人
时间: 2024-03-10 22:36:21 浏览: 44
可以使用CSS3的Transform和Animation属性来创建一个简单的机器人,如下所示:
HTML代码:
```html
<div class="robot">
<div class="head"></div>
<div class="body"></div>
<div class="left-arm"></div>
<div class="right-arm"></div>
<div class="left-leg"></div>
<div class="right-leg"></div>
</div>
```
CSS代码:
```css
.robot {
position: relative;
width: 100px;
height: 150px;
margin: 50px auto;
animation: shake 2s infinite;
}
.head {
position: absolute;
top: 0;
left: 50%;
width: 50px;
height: 50px;
border-radius: 50%;
background: #999;
transform: translate(-50%, -50%);
}
.body {
position: absolute;
top: 50px;
left: 50%;
width: 60px;
height: 80px;
background: #ccc;
transform: translate(-50%, -50%);
}
.left-arm, .right-arm {
position: absolute;
top: 50px;
width: 30px;
height: 70px;
background: #999;
}
.left-arm {
left: -40px;
transform-origin: top center;
transform: rotate(30deg);
}
.right-arm {
right: -40px;
transform-origin: top center;
transform: rotate(-30deg);
}
.left-leg, .right-leg {
position: absolute;
bottom: 0;
width: 20px;
height: 80px;
background: #999;
}
.left-leg {
left: 20px;
transform-origin: top center;
transform: rotate(-10deg);
}
.right-leg {
right: 20px;
transform-origin: top center;
transform: rotate(10deg);
}
@keyframes shake {
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(20deg);
}
40% {
transform: rotate(-20deg);
}
60% {
transform: rotate(20deg);
}
80% {
transform: rotate(-20deg);
}
100% {
transform: rotate(0deg);
}
}
```
效果如下所示:
![机器人](https://img-blog.csdnimg.cn/20210827173939534.png)
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![jpg](https://img-home.csdnimg.cn/images/20210720090814.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)