css3给盒子加一个白色闪光效果（超简单）

最新推荐文章于 2022-12-28 14:59:44 发布

原创最新推荐文章于 2022-12-28 14:59:44 发布 · 1.8k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用CSS和JavaScript创建一个视觉动态效果，通过子盒子的定位变换和线性渐变，实现元素在鼠标悬停时从左向右滑动的闪光效果。通过代码示例和原理解析，带你快速掌握这种炫酷的网页动画技巧。

要实现的效果如下图：

操作思路：

创建一个div，设置宽高，里面创建一个子盒子（不用伪元素也行）
用子绝父相子盒子定位到父盒子左侧
给子盒子用2d转换和背景的线性渐变，创造闪光的形状
设置:hover效果，使子盒子从父盒子左边移动到父盒子右边

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>白色闪光效果</title>
  <style>
    div {
      float: left;
      position: relative;
      margin: 100px 20px;
      width: 200px;
      height: 160px;
      /* 给父盒子添加溢出隐藏 */
      overflow: hidden;
    }
    div:nth-child(1) {
      background-color: #3cf;
    }
    div:nth-child(2) {
      background-color: #88f;
    }
    div:nth-child(3) {
      background-color: #f88;
    }
    div:nth-child(4) {
      background-color: #fc3;
    }
    div::after {
      /* 将子盒子定位到父盒子左边（被隐藏） */
      position: absolute;
      left: -120%;
      top: 0;
      content: "";
      width: 100%;
      height: 100%;
      /* 让子盒子变形为倾斜 */
      transform: skew(-30deg);
      /* 给子盒子一个透明~白色~透明的线性渐变 */
      background-image: linear-gradient(90deg,rgba(0,0,0,0),rgba(255,255,255,.5),rgba(0,0,0,0));
    }
    div:hover::after {
      /* 将子盒子定位到父盒子右边 */
      left: 120%;
      /* 添加过渡属性，让移动可见 */
      transition: all .4s;
    }
  </style>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>