一、前言

首先恭喜下自己哈，在本人的不懈努力下，终于把创作等级升到lv4了，可喜可贺可喜可贺。

ps:其实就是水文，日更没存货就只能开水了。

今天就简单带大家来看看平时ur卡牌有的浮光掠影效果，用css如何来实现。

二、实现过程。

1、效果图

QQ录屏20230509183033.gif 就效果而言，其实就是一个白色的元素一闪而过，所以我们下面是考虑用定位和transform:skewX的属性来综合实现。

2、整体思路

1、首先

是我们创建和图片同级的一个div元素，用来画一个竖直的长方形的白色div，设置opcity将其变为半透明，同时借助transform: skewX的属性，将其变成等高的平行四边形，倾斜角度自定，如果图片是正方形，就是-45deg，不过是其他的比例，可以自行通过三角知识算出倾斜角度，或者调试效果得出。

2、然后

是定位问题，上面提到的白色div需要是绝对定位的，所以外层div先需要相对定位position: relative，一开始left属性默认是0。

3、最后一步

本文实现的效果是在悬浮的时候，修改left值，例如left=200px（超出或者等于图片长度），通过transition指定left和时间，形成过渡，通过动画来实现这个一闪而过的效果。

也可以根据实际情况，在别的时机，触发这种动画，甚至可以直接做成循环动画都可以，思路打开，格局打开。

3、源码

html部分

  <div class="box">
     <div class="flash" />
     <img src="@/assets//test.png" />
  </div>

css部分

 .box {
  position: relative;
  width: 200px;
  height: 400px;
  overflow: hidden;
  .flash {
    position: absolute;
    left:-200px;
    width: 20px;
    height: 100%;
    background: #fff;
    opacity: 0.5;
    transform: skewX(-30deg);
    transform-origin: 0 100%;
  }
  img {
    width: 100%;
    height: 100%;
  }
}
.box:hover .flash {
  left:200px;
  transition: left ease-in-out 1s;
}

三、小结

css的魅力还是很多的，这种所见即所得的实现效果，还是很容易上瘾的。

所以大家平时可以多多试看看一些不会写到的效果，多储备储备一些，别书到用时方恨少哈。

ps: 我是地霊殿__三無，希望能帮到你（让我水完这次的日更，就差几天了）。

css实现特效浮光掠影