页面效果

css遮罩效果

1、绘制菱形

Dom节点首先我设计了上下两个 ul，第一个ul设置5个li用于存放每个框元素，然后针对ul li里面设置div，将对应的背景图及文字进行设置。我们都知道CSS3有一个transform属性，这个属性主要应用于2D和3D的旋转转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
绘制菱形核心是：transform的rotate属性，设置45度，就可以将整成的div进行45度旋转，就自然形成一个菱形效果。如下所示：
在这里插入图片描述
依法炮制，形成多个类似的框。
html框架（第一行5个菱形）

 <ul class="one">
        <li>
          <div class="kuang kuang1">
          </div>
          <div class="kuang kuang2">
          </div>
        </li>
        <li style="margin-left: -145px;">
          <div class="kuang kuang1">
          </div>
          <div class="kuang kuang2">
          </div>
          <div class="text1">
            <div class="bg bg1">
              <p class="num">1</p>
              <p class="title">打开百度</p>
              <p class="eng">Open the net of baidu</p>
            </div>
          </div>
          <div class="text2">
            <div class="mengban"></div>
            <p class="desc">1在约定的时间、地点进行拍摄，请您提前备好服装及化妆，根据选择的拍摄套系我们会提前给您提出很好的建议。</p>
          </div>
        </li>
        <li>
          <div class="kuang kuang1">
          </div>
          <div class="kuang kuang2">
          </div>
          <div class="text1">
            <div class="bg bg2">
              <p class="num">2</p>
              <p class="title">搜索CSDN</p>
              <p class="eng">Search CSDN site</p>
            </div>
          </div>
          <div class="text2">
            <div class="mengban"></div>
            <p class="desc">2在CSDN里面搜索博主 【拄杖盲学轻声码】。</p>
          </div>
        </li>
        <li>
          <div class="kuang kuang1">
          </div>
          <div class="kuang kuang2">
          </div>
          <div class="text1">
            <div class="bg bg3">
              <p class="num">3</p>
              <p class="title">查看博主</p>
              <p class="eng">To pay a deposit</p>
            </div>
          </div>
          <div class="text2">
            <div class="mengban"></div>
            <p class="desc">3在约定的时间、地点进行拍摄，请您提前备好服装及化妆，根据选择的拍摄套系我们会提前给您提出很好的建议。</p>
          </div>
        </li>
        <li style="margin-left: -145px;">
          <div class="kuang kuang1">
          </div>
          <div class="kuang kuang2">
          </div>
        </li>
      </ul>

具体实现CSS代码如下：

.process-box ul li .kuang {
    
    
  position: absolute;
  width: 196px;
  height: 196px;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  border: 1px solid #ddd;
  margin-top: 42px;
  margin-left: 42px;
}

2、设置样式（position应用）

核心样式在于遮罩和背景图，其实背景图是设计好的菱形背景图，另外切记遮罩div采用的是相对布局position。具体可以下载源码包进行查看。当然我们所有的position属性都是基于父节点的。
所以在我们设计的过程中我们用li作为父元素，然后再在li里面添加div标签，div就可以设置position为absolute属性，其实就是相对父元素的位置可以用top/left/bottom/right进行大小设置便偏移量，更多的目的是可以将两个div进行上下两层展示，设置z-index大小就可以设置展示优先级的高低。
设置完之后的效果如下所示：
在这里插入图片描述
具体核心代码如下：

.process-box ul li {
    
    
  width: 196px;
  height: 196px;
  float: left;
  cursor: pointer;
  position: relative;
}
.process-box ul li .kuang {
    
    
  position: absolute;
  width: 196px;
  height: 196px;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  border: 1px solid #ddd;
  margin-top: 42px;
  margin-left: 42px;
}

3、鼠标移入遮罩（hover应用）

这个我们可以先将遮罩的display属性设置为none,然后用li伪元素hover后设置遮罩的div的display属性为block。
如下图所示：
在这里插入图片描述
移入的效果主要源码如下:

.process-box ul li .text2 {
    
    
  width: 276px;
  height: 276px;
  z-index: 4;
  position: absolute;
  left: 5px;
  top: 0px;
  display: none;
}
.process-box ul li:hover .text2 {
    
    
  display: block;
}

4、源码分享

百度网盘分享

链接：https://pan.baidu.com/s/12KWW6d1MA3eQwLbkARvVgQ
提取码：0pap

彩蛋皇榜

倾心打造佳作，愿解君之惑，如若有幸，盼君上榜助阵，特此敬谢！
皇榜入口点击此处

【CSS菱形遮罩效果】Css3实现菱形遮罩效果鼠标移入展示描述（附完整源码下载）

目录