css3编写火柴人 |css伪元素制作消息框

/* 首先，大家需要定义火柴人的主要部分 - 头和身体。 */
.head, .body {
width: 30px;
height: 30px;
background-color: #000;
border-radius: 50%;
}
/* 火柴人的头和身体需要连接在一起。 */
.neck {
width: 5px;
height: 10px;
background-color: #000;
margin: 0 auto;
}
/* 接下来，大家需要定义火柴人的手臂。 */
.arm {
width: 28px;
height: 5px;
background-color: #000;
border-radius: 5px;
}
/* 火柴人的手臂需要向上或向下弯曲。 */
.left-arm {
transform: rotate(-45deg);
}
.right-arm {
transform: rotate(45deg);
}
/* 最后，大家需要定义火柴人的腿和脚。 */
.leg {
width: 5px;
height: 15px;
background-color: #000;
border-radius: 5px;
}
/* 火柴人的腿需要向左或向右分开。 */
.left-leg {
transform: rotate(45deg);
}
.right-leg {
transform: rotate(-45deg);
}
.left-foot, .right-foot {
width: 10px;
height: 5px;
background-color: #000;
position: relative;
top: -5px;
border-radius: 5px 5px 0 0;
}
.left-foot {
left: -5px;
}
.right-foot {
right: -5px;
}
/* 火柴人完成！ */

按照上面的CSS代码，大家成功地编写了一个简单的火柴人。他可以跳舞，打招呼，或者做任何你想让他做的事情。CSS3是一项非常强大的工具，帮助大家更好的控制和美化网页的外观。