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

03250

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

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

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

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

使用方法：

1，html部分

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

<div class="logo-site">
    <img src="img/test.png" alt="风景"/>
</div>
<div class="logo-site">
    <img src="img/test.png" alt="风景"/>
</div>
<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; }
    }
.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; }
    }
.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>
<!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>
<!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
主题美化
# 特效# 主题美化
喜欢点个赞支持一下吧
点赞0赏币 分享
Believe you can and you’re halfway there.
相信自己，你也就成功了一半
大雄的头像-大雄搜集站钻石会员
相关推荐
评论交流 抢沙发

请登录后发表评论

    暂无评论内容

AI影视导航
PDF万能工具任意格式转换-去水印压缩加密解密工具-大雄搜集站

1PDF万能工具任意格式转换-去水印压缩加密解密工具

大雄的头像-大雄搜集站钻石会员3年前
R币 6584
WordPress为文章添加字数统计时间代码-大雄搜集站

2WordPress为文章添加字数统计时间代码

大雄的头像-大雄搜集站钻石会员3年前
262
Wordpress简约大气昼夜导航NDNAV主题模板-大雄搜集站

3WordPress简约大气昼夜导航NDNAV主题模板

大雄的头像-大雄搜集站钻石会员4年前
335
2500款热门经典短视频剪辑原素材下载-大雄搜集站

42500款热门经典短视频剪辑原素材下载

大雄的头像-大雄搜集站钻石会员4年前
338
高质量2022虎年新春拜年边框片头pr素材模板-大雄搜集站

5高质量2022虎年新春拜年边框片头pr素材模板

大雄的头像-大雄搜集站钻石会员3年前
173
各大素材解析白嫖支持20网-大雄搜集站

6各大素材解析白嫖支持20网

大雄的头像-大雄搜集站钻石会员2年前
1844
TOP1
TOP2
TOP3
TOP4
TOP5
TOP6
 

AI影视导航

 
汇聚数百款全球AI工具。各种免费VIP影视免费观看
立即进入🚀
最新评论
巡山的头像-大雄搜集站

巡山11天前0

表情[zhemo]-大雄搜集站
MacKen的头像-大雄搜集站

MacKen11天前0

自行车v自行车
3781691s的头像-大雄搜集站

3781691s17天前0

66666
江海寄余生的头像-大雄搜集站

江海寄余生1个月前0

111111111111111111
一***1的头像-大雄搜集站

一***11个月前0

谢谢站长
寻***央的头像-大雄搜集站

寻***央1个月前0

123478
poiuy的头像-大雄搜集站

poiuy1个月前0

夸就完事了
没必要，真就没必要的头像-大雄搜集站

没必要，真就没必要1个月前0

6666666666666
标签云
重装系统设计视频表白表情包舔狗日记脚本网页模板编程素材程序源码福利破解独立部署特效源码开源源码二开源码买断游戏油猴脚本摸鱼插件接码短信平台抖音影视
坚持每天来逛逛，会让你
生活也美好了！
心情也舒畅了！
走路也有劲了！
腿也不痛了！
腰也不酸了！
工作也轻松了！
你好我也好，不要忘记哦!