css如何画一个叉号 |css3网页动画素材

.x {
width: 50px;
height: 50px;
position: relative;
}
.x:before, .x:after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
background-color: #000;
}
.x:before {
transform: rotate(45deg);
}
.x:after {
transform: rotate(-45deg);
}

通过上面的 CSS 代码，大家可以看出，其中 .x 是一个元素的 class，通过给这个元素加上 :before 和 :after，大家可以实现画出一个叉号。在 :before 中使用 transform: rotate(45deg) 顺时针旋转 45 度，使其变成一个斜的线段，并通过 transform: rotate(-45deg) 在 :after 中逆时针旋转 45 度，使其变成另一个斜的线段。

同时，在 :before 和 :after 中，大家设置它们的 top 属性为 50% 以及 left 属性为 0，让它们在元素的中心位置。然后，大家设置它们的 width 为 100% 以及 height 为 2px，并且背景颜色设置为黑色，当做两条线段。

最后，大家把画好的叉号位置坐标旋转回去，就完成了整个效果的制作。