[分享]css3多张图片形成十字架

CSS3是网页设计中重要的一部分，它可以在不使用JavaScript的情况下实现许多效果。今天我们来学习如何使用CSS3制作一组多张图片形成十字架的效果。/ 首先，定义一个容器div / .cross...

CSS3是网页设计中重要的一部分，它可以在不使用JavaScript的情况下实现许多效果。今天我们来学习如何使用CSS3制作一组多张图片形成十字架的效果。

/* 首先，定义一个容器div */
.cross-container {
  display: flex; /* 使用弹性盒子布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

/* 接着，我们定义四个div分别放置四张图片 */
.cross-container div {
  width: 150px;
  height: 150px;
  position: relative; /* 相对定位 */
}

/* 设置图片样式，使用绝对定位 */
.cross-container div img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* 添加伪元素，制作十字架效果 */
.cross-container div::before,
.cross-container div::after {
  content: "";
  display: block;
  width: 10px;
  height: 100%;
  background-color: #333; /* 修改颜色 */
  position: absolute;
  top: 0;
  left: 50%; /* 把左上角设置到中间位置 */
  transform: translateX(-50%); /* 水平居中 */
}

/* 垂直线 */
.cross-container div::before {
  width: 100%;
  height: 10px;
  left: 0;
  top: 50%; /* 把左上角设置到中间位置 */
  transform: translateY(-50%); /* 垂直居中 */
} 

以上就是制作CSS3多张图片形成十字架的全部代码。通过这个示例，我们可以学习到如何使用CSS3的弹性盒子布局、伪元素、绝对定位、transform变形等技术实现网页的丰富效果。