css如何实现白光划过效果

有时候在浏览网站的时候，会发现有图片鼠标经过会有移到白光闪过，这个效果还是比较不错的，具体怎么实现的呢，如下

1、html部分

我们要放置一张图片，用一个div包裹起来：

<div class="highlight-box">
	<img src="images/example.jpg" alt="" />
</div>

2、设置CSS样式

.highlight-box {
	width: 300px;
	height: 120px;
	overflow: hidden;
	position: relative;
}

.highlight-box img {
	width: 100%;
	height: 100%;
}
.highlight-box:before {
	display: block;
	/*注意这里top和left，让白光移动到图片左上角，
	后续的划过动画也是依靠这两个属性*/
	top: -200%;
	left: -100%;
	/*定义白光的宽高*/
	width: 50%;
	height: 300%;
	/*旋转角度，你也可以调整*/
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	/*使用渐变来实现白光*/
	background: -webkit-linear-gradient(left, rgba(255, 255, 255, .05) 20%, 
            rgba(255, 255, 255, .6) 65%, rgba(255, 255, 255, .05) 100%);
	background: linear-gradient(left, rgba(255, 255, 255, .05) 20%,
            rgba(255, 255, 255, .6) 65%, rgba(255, 255, 255, .05) 100%);
	content: '';
	z-index: 2;
	position: absolute;
}

我们使用渐变（linear-gradient）来实现白光效果，同时为了斜向划过，使用transform: rotate(45deg)将其旋转45度。

上面的height、width、top和left，你也可以使用具体的像素值，不过建议采用百分比，这样可以重复使用，而不需手动改变太多值。

图片有了，白光有了，接下来就是让白光动起来：

.highlight-box:hover:before {
    //这里省略了私有前缀代码
	animation: crossed .5s linear;
}

@keyframes crossed {
	0% {
		top: -200%;
		left: -100%;
	}
	100% {
		top: -50px;
		left: 100%;
	}
}

以上这篇css如何实现白光划过效果就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持芦苇派。