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

经常看博客,逛网站的朋友一定看过这个一道白色闪光划过特效,大多数体现在网站博客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大小会有差异,

© 版权声明
THE END
喜欢点个赞支持一下吧
点赞0赏币
分享
评论交流 抢沙发

请登录后发表评论