用CSS轻松实现网页礼物闪光效果

你有没有在某些节日促销页面上看到过那种闪闪发光的礼物盒？点击一下，金光四射，让人忍不住想点进去看看里面是什么。这种视觉小惊喜其实并不复杂，用一点CSS就能做出来，特别适合用在网页活动页或者浏览器小插件里。

为什么选闪光效果？

比如你正在做一个浏览器书签脚本，想给某个网页上的礼品图标加点动态效果，让它更吸引眼球。这时候，一个轻量又不卡顿的闪光动画就派上用场了。它不像视频那么重，也不需要JavaScript频繁操作，纯CSS就能搞定。

基础结构：先有个“礼物”

假设页面上有一个代表礼物的div，长这样：

<div class="gift-box"></div>

我们先给它加个基本样式，看起来像个小盒子：

.gift-box {
  width: 100px;
  height: 100px;
  background: #e74c3c;
  position: relative;
  border-radius: 10px;
}

.gift-box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 10%;
  height: 100%;
  background: #f1c40f;
}

加入闪光：用伪元素模拟光扫

真正的魔法在这里。我们可以用 ::before 伪元素画一道斜着的光条，然后让它从左到右快速划过，就像镜头反光一样。

.gift-box::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -100%;
  width: 200%;
  height: 200%;
  background: rgba(255, 255, 255, 0.6);
  transform: rotate(30deg);
  animation: shine 1.5s infinite;
}

@keyframes shine {
  0% {
    left: -100%;
  }
  20% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}

这段代码里的关键在于 animation 控制光条从左边飞到右边，而透明度和旋转角度让它看起来更自然。你可以把 animation-delay 随机化，如果页面上有多个礼物，每个闪的时间都不一样，显得更生动。

怎么用在实际场景？

打开浏览器开发者工具，在任意网页的元素上临时加上这类样式试试。比如你在某电商网站的优惠券图标旁边加个 class="gift-box"，再注入上面的CSS，立马就能看到效果。也可以做成用户样式脚本（UserCSS），配合Stylus这类浏览器扩展长期使用。

这种效果轻巧、兼容性好，IE9以上都支持。不需要额外资源，也不会拖慢页面。下次你想让某个按钮或图标更“亮眼”，不妨试试这个闪光小技巧。