[分享]css3图片闪过一道光

CSS3可以让我们创建各种华丽的效果，其中闪过一道光的效果就是其中之一。

.flash {
    position: relative;  /* 定位 */
    display: inline-block;  /* 行内元素 */
}

.flash::before {
    content: "";  /* 内容为空 */
    position: absolute;  /* 定位 */
    top: 0; left: 0;  /* 距离顶部和左侧的距离 */
    width: 100%; height: 100%;  /* 宽高100% */
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));  /* 渐变 */
    transform: translateX(-100%); /* 从左侧移动距离 */
    animation: flash 2s infinite; /* 动画效果 */
}

@keyframes flash {
    0% {
        transform: translateX(-100%);
    }
    50%, 100% {
        transform: translateX(200%); /* 移动距离 */
    }
} 

以上代码是实现闪过一道光效果的核心代码。我们可以通过在HTML元素中添加class“flash”来应用这个效果。代码中使用了伪元素“::before”来创建光线，然后通过CSS3动画实现闪过效果。

在这个效果中，我们设置了一个渐变背景，让光线的末尾渐变成透明，并沿着X轴移动。我们通过关键帧动画transform对光线进行了移动，跑出边缘，然后再次出现，循环不断。

这个简单的CSS3效果可以让你的网站更加生动有趣，如果你还不会使用CSS3来创建动态效果，何不试一试呢？