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

最新推荐文章于 2025-09-12 09:37:03 发布

原创

最新推荐文章于 2025-09-12 09:37:03 发布 · 1.3k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#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)