CSS遮罩层(有趣的小动画)

前言

​ 今天在编写页面是,发现一个很有意思的遮罩层的动画效果,也是分享给大家

效果图

当鼠标悬浮在照片上时,出现白色透明遮罩层,照片两边想中间消失,

小编在这里介绍两种方法

方法一

实现思路

• 创建一个整体大盒子,放置照片和遮罩层盒子
• 设置照片宽高,与外层大盒子宽高一致
• 创建两个div盒子,高度与照片高度相同,宽度为照片宽度的一半
• 使用绝对定位,让两个盒子覆盖照片,
• 设置动画规则,让宽度变为0
• 给大盒子添加鼠标悬浮属性,滑入后让盒子执行动画0

实现步骤

 .box {
      width: 300px;
      height: 180px;
      margin:100px auto;
      position: relative;
     
    }
    .box>img {
      width: 300px;
      height: 180px;
    }
    .mask1 {
      width: 150px;
      height: 180px;
      background-color:rgba(255, 255, 255, .4);
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
    }
    .mask2 {
      width: 150px;
      height: 180px;
      background-color:rgba(255, 255, 255, .4);
      position: absolute;
      top: 0;
      right: 0;
      opacity: 0;
    }
 

 <div class="box">
    <img src="./differ_pic_2.jpg" alt="">
    <div class="mask1"></div>
    <div class="mask2"></div>
  </div>

按照实现思路,我们已经将设置好照片宽高,并创建遮罩层盒子通过绝对定位覆盖在照片上,设置 opacity: 0;
让遮罩层盒子隐藏

 @keyframes mask1 {
      from {}
      to {
        width: 0;
         opacity: 1;
      }
    }

设置动画规则,让遮罩层盒子的宽度为0,并且设置 opacity: 1;动画执行,遮罩层盒子显示

  .box:hover .mask1 {
    animation: mask1 .5s linear forwards;
  }
  .box:hover .mask2 {
    animation: mask1 .5s linear forwards;
  }

添加鼠标悬浮属性,执行动画,设置动画播放时间0.5秒,匀速执行,停留在最后一帧

查看效果发现,效果图中的动画与我们想要的动画效果不同,效果图中的动画是从中间向两边逐渐消失,而我们想要的效果是让遮罩层从两边向中间逐渐消失,那么我们要如何改进代码实现我们想要的效果呢?
其实想要实现我们想要的效果也是简单的,我么只需要改一下绝对定位就可以了

 .mask1 {
     width: 150px;
     height: 180px;
     background-color:rgba(255, 255, 255, .4);
     position: absolute;
     top: 0;
     left: 150px;
     opacity: 0;
   }
   .mask2 {
     width: 150px;
     height: 180px;
     background-color:rgba(255, 255, 255, .4);
     position: absolute;
     top: 0;
     right: 150px;
     opacity: 0;
   }

查看上面的代码,可以看到,我给mask1盒子的绝对定位left属性添加了150px的位移距离,
mask2盒子的绝对定位right属性添加了150px的位移距离,
其实就是让两个遮罩层盒子交换一下位置就可以实现了

方法二

实现思路

• 创建一个整体大盒子,放置照片和遮罩层盒子
• 设置照片宽高,与外层大盒子宽高一致
• 创建遮罩层盒子,设置白色透明背景,使用绝对定位覆盖在照片上
• 设置动画规则,使用transform属性,scaleX属性值,放大倍数为0
• 添加鼠标滑入属性hover,当鼠标滑入时,执行动画

实现步骤

.box {
      width: 300px;
      height: 180px;
      margin: 100px auto;
      position: relative;
    }
    .box>img {
      width: 300px;
      height: 180px;
     
    }
    .mask {
      width: 300px;
      height: 180px;
      background-color: rgba(255, 255,255, .4);
      position: absolute;
      top: 0;
      left: 0;
       opacity: 0;
    }

 <div class="box">
    <img src="./differ_pic_2.jpg" alt="">
    <div class="mask"></div>
  </div>

查看代码,可以看到已经完了实现思路的前三个步骤,
注意:我们要的效果是鼠标悬浮后,显示遮罩层并执行动画,所以我们需要将遮罩层隐藏,是指opacity:0;

  @keyframes mask  {
      from {}
      to {
        opacity: 1;
        transform: scalex(0);
      }
    } 

设置动画规则,让遮罩层显示,通过scaleX属性值调整遮罩层大小,宽度变为0

 .box:hover .mask{
     animation: mask .5s linear forwards;
     cursor: pointer;
   }

添加鼠标悬浮,执行动画,动画事件为0.5秒,匀速播放,停留在最后一帧
关于遮罩层动画就已经完成了

总结

相比于方法二而言,方法一过于繁琐复杂,代码体积较大,不适合在实际项目中使用,也不便于后期维护,所以不建议使用,
关于本篇文章,为什么用动画属性来执行而不是用过度属性执行呢?
鼠标悬浮时,动画开始执行
当鼠标光标离开照片时
使用多度属性 后又一个遮罩层从中间向两边遮罩的过程,这不是我们想要的效果,我们希望鼠标光标离开照片后,不会再有其他的效果,而是用动画属性则可以实现,放鼠标光标离开照片时动画结束,再次悬浮,动画开始重新执行