网站logo-图片自动出现一道白色闪光划过

经常看博客，逛网站的朋友一定看过这个一道白色闪光划过特效，大多数体现在网站博客logo上，看起来非常有特色，

所以站长刚搭建的网站，也是想使用一下这种炫酷的效果，很多网站其实都可以看到，特别适合网站的logo，有一定的动态性，具体效果可以看一下，本站logo效果。具体使用如下，

具体效果，本站左上角如图所示：

使用方法：

1，html部分

这个也没有多大的技术含量，就是css+ html，div套一个img标签就可以了，下面图片可以自己选择一张本地的替换上，

<div class="logo-site">
    <img src="img/test.png" alt="风景"/>
</div>

2，css部分才是关键

实际效果，使用的技术主要是css3动画相关属性：animation: searchLights 1s ease-in 1s infinite; 还有:before属性结合，学习党，详细可详细看部分注释代码。

.logo-site {
		position: relative;
		width: 255px;
		overflow: hidden;
		}
		.logo-site:before{
		content:"";
		position: absolute;
		/*注意这里top和left，让白光移动到图片左上角，
			后续的划过动画也是依靠这两个属性*/
		left: -800px;
		top: -460px;
		/*定义白光的宽高*/
		width: 350px;
		height: 30px;
		/*使用渐变来实现白光*/
		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%);
		/*旋转角度，你也可以调整*/
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
		/* 触发动画 */
		-webkit-animation: searchLights 1s ease-in 1s infinite;
		-moz-animation: searchLights 1s ease-in 1s infinite;
		animation: searchLights 1s ease-in 1s infinite;
		}
		@-webkit-keyframes searchLights {
		0% { left: -250px; top: 0; }
		to { left: 200px; top: 200px; }
		}
		@-o-keyframes searchLights {
		0% { left: -250px; top: 0; }
		to { left: 200px; top: 200px; }
		}
		@-moz-keyframes searchLights {
		0% { left: -250px; top: 0; }
		to { left: 200px; top: 200px; }
		}
		@keyframes searchLights {
		0% { left: -250px; top: 0; }
		to { left: 120px; top: 200px; }
		}

3，完整的代码结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		.logo-site {
		position: relative;
		width: 255px;
		overflow: hidden;
		}
		.logo-site:before{
		content:"";
		position: absolute;
		/*注意这里top和left，让白光移动到图片左上角，
			后续的划过动画也是依靠这两个属性*/
		left: -800px;
		top: -460px;
		/*定义白光的宽高*/
		width: 350px;
		height: 30px;
		/*使用渐变来实现白光*/
		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%);
		/*旋转角度，你也可以调整*/
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
		/* 触发动画 */
		-webkit-animation: searchLights 1s ease-in 1s infinite;
		-moz-animation: searchLights 1s ease-in 1s infinite;
		animation: searchLights 1s ease-in 1s infinite;
		}
		@-webkit-keyframes searchLights {
		0% { left: -250px; top: 0; }
		to { left: 200px; top: 200px; }
		}
		@-o-keyframes searchLights {
		0% { left: -250px; top: 0; }
		to { left: 200px; top: 200px; }
		}
		@-moz-keyframes searchLights {
		0% { left: -250px; top: 0; }
		to { left: 200px; top: 200px; }
		}
		@keyframes searchLights {
		0% { left: -250px; top: 0; }
		to { left: 120px; top: 200px; }
		}

		</style>
	</head>
	<body>
		<div class="logo-site">
			<img src="img/test.png" alt="风景"/>
		</div>
	</body>
</html>

最后使用，自己线上使用，可能需要时间微调一下数值而已，因为每个人使用的logo大小会有差异，

版权声明本站名称：大雄搜集站
本站永久网址：https://soujiz.com
1 本站资源大多存储在云盘，如有链接失效，请留言反馈站长更新！
2 本站各种资源及源码软件大部分为网络搜集而来，如有侵犯版权的，请邮件与我们联系，本站将予以改正。
3 由于网络资源有极快的复制性，付费资源一经购买，不以任何形式退款，购买过程中如有付费资源失效，请及时联系站长。

THE END