[分享]css3十字架

CSS3十字架是一种常见的CSS3代码技巧，它能够让网页中的元素呈现出十字架的视觉效果，为网页设计提供更加灵动的展示方式。.cross { : relative; width: 50px; heigh...

CSS3十字架是一种常见的CSS3代码技巧，它能够让网页中的元素呈现出十字架的视觉效果，为网页设计提供更加灵动的展示方式。

.cross {
  position: relative;
  width: 50px;
  height: 50px;
}
.cross:after, .cross:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: black;
}
.cross:after {
  transform: translate(-50%, -50%) rotate(90deg);
} 

以上代码是实现CSS3十字架效果的基本代码，其中，通过设置元素的position属性为相对定位，使用:after伪元素和:before伪元素实现两条水平和垂直的线条，通过transform属性和rotate属性调整其位置和角度，为其添加背景色即可完成CSS3十字架的效果展示。

在实际应用中，开发者可以根据具体的需求和样式要求对此代码进行自定义修改，改变元素的大小、颜色、位置等，同时还可以添加过渡动画效果或者事件触发等交互效果，让CSS3十字架更加灵活多变。