大白——迪士尼动画《超能陆战队》中的健康机器人，是一个体型胖胖的充气机器人，因呆萌的外表和善良的本质获得大家的喜爱，被称为“萌神”。那可以用编程的方式画出大白吗？回答当然是肯定的，现在就让我们用学过的知识html，css来动手实现吧！
任务描述：
1、实现大白可以分为下述几部分：头部、躯干、腹部、手臂(左手，右手)、腿部（左腿，右腿)
2、div圆角边框可以使用border-radius实现
3、使用transform可以旋转元素
4、使效果图水平居中显示
大白——迪士尼动画《超能陆战队》中的健康机器人，是一个体型胖胖的充气机器人，因呆萌的外表和善良的本质获得大家的喜爱，被称为“萌神”。那可以用编程的方式画出大白吗？回答当然是肯定的，现在就让我们用学过的知识html，css来动手实现吧！
任务描述：
1、实现大白可以分为下述几部分：头部、躯干、腹部、手臂(左手，右手)、腿部（左腿，右腿)
2、div圆角边框可以使用border-radius实现
3、使用transform可以旋转元素
4、使效果图水平居中显示
登录后即可发布作业，立即登录
全部作业 34
.head {
width: 100px;
height: 100px;
background-color: white;
border-radius: 50%;
position: relative;
margin-bottom: -30px;
}
.head::before {
content: “”;
width: 10px;
height: 10px;
background-color: black;
border-radius: 50%;
position: absolute;
left: 30px;
top: 40px;
}
.head::after {
content: “”;
width: 10px;
height: 10px;
background-color: black;
border-radius: 50%;
position: absolute;
right: 30px;
top: 40px;
}
.head::before {
content: “”;
width: 40px;
height: 5px;
background-color: black;
position: absolute;
left: 30px;
top: 50px;
}
/* 躯干样式 */
.torso {
width: 200px;
height: 300px;
background-color: white;
border-radius: 50% 50% 0 0;
position: relative;
}
/* 腹部样式 */
.abdomen {
width: 180px;
height: 220px;
background-color: white;
border-radius: 50%;
position: absolute;
bottom: 0;
left: 10px;
}
/* 左臂样式 */
.left - arm {
width: 60px;
height: 180px;
background-color: white;
border-radius: 50% 0 0 50%;
position: absolute;
left: -60px;
top: 100px;
transform: rotate(-10deg);
}
/* 左手样式 */
.left - hand {
width: 40px;
height: 40px;
background-color: white;
border-radius: 50%;
position: absolute;
bottom: 0;
left: 10px;
}
/* 右臂样式 */
.right - arm {
width: 60px;
height: 180px;
background-color: white;
border-radius: 0 50% 50% 0;
position: absolute;
right: -60px;
top: 100px;
transform: rotate(10deg);
}
/* 右手样式 */
.right - hand {
width: 40px;
height: 40px;
background-color: white;
border-radius: 50%;
position: absolute;
bottom: 0;
right: 10px;
}
/* 左腿样式 */
.left - leg {
width: 60px;
height: 100px;
background-color: white;
border-radius: 0 0 50% 50%;
position: absolute;
left: 60px;
bottom: -100px;
}
/* 右腿样式 */
.right - leg {
width: 60px;
height: 100px;
background-color: white;
border-radius: 0 0 50% 50%;
position: absolute;
right: 60px;
bottom: -100px;
}