仿京东图片鼠标滑过闪亮特效纯HTML+CSS代码

网络 2020-09-10 本文共1687个字，预计耗時5分钟 844次阅读

文章摘要：鼠标滑过图片有个闪光效果，HTML+CSS源代码，效果预览如下GIF，如何使用：新建个html文件复制粘贴，使用浏览器打开html文件。主要是个CSS3效果，可以用到自己网站图片上加了类名，CSS复制样式即可。 <!DOCTYPE h...

鼠标滑过图片有个闪光效果，HTML+CSS源代码，效果预览如下GIF，如何使用：新建个html文件复制粘贴，使用浏览器打开html文件。主要是个CSS3效果，可以用到自己网站图片上加了类名，CSS复制样式即可。

<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<title></title>
<style>
#light{
	width:173px;
	height:200px;
	background:url('http://doc.ydqic.com/wp-content/themes/ripro/assets/images/logo/logo-light.png') top left no-repeat;
	color:#fff;
	font-size:20px;
	text-align:center;
	line-height:200px;
	text-shadow:0px 2px 2px green; 
	margin:100px auto;
	position:relative;
}
#light:before{
	content: "";
	position: absolute;
	width: 80px;
	height: 241px;
	left: -120px;
	top:-27px;
	overflow: hidden;
	background: -webkit-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,.2),rgba(255,255,255,0));
	background: -moz-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,.2),rgba(255,255,255,0));
	background: -ms-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,.2),rgba(255,255,255,0));
	background: -o-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,.2),rgba(255,255,255,0));
	background: linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,.2),rgba(255,255,255,0));
	-webkit-transform: skewX(-25deg);
	-moz-transform: skewX(-25deg);
	-ms-transform: skewX(-25deg);
	-o-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
@-webkit-keyframes light{
	0%{left:-120px;}
	100%{left:240px;}
}
@-moz-keyframes light{
	0%{left:-120px;}
	100%{left:240px;}
}
@-ms-keyframes light{
	0%{left:-120px;}
	100%{left:240px;}
}
@-o-keyframes light{
	0%{left:-120px;}
	100%{left:240px;}
}
@keyframes light{
	0%{left:-120px;}
	100%{left:240px;}
}
#light:hover:before{-webkit-animation:light .6s ease-in .1s;
	-moz-animation:light .6s ease-in .1s;
	-ms-animation:light .6s ease-in .1s;
	-o-animation:light .6s ease-in .1s;
	animation:light .6s ease-in .1s;
}
</style>
</head>
<body>
<div id="light"></div>
</body>
</html>

本文地址：https://doc.ydqic.com/1334.html

版权免责申明
① 本站源码模板等资源SVIP用户永久不限量免费下载
② 所有资源来源于网络收集，如有侵权，请联系站长进行删除处理。
③ 分享目的仅供大家学习和交流，请不要用于商业用途，否则后果自负。
④ 如果你有源码需要出售，可以联系管理详谈。
⑤ 本站提供的源码、模板、插件等等资源，都不包含技术服务请大家谅解。
⑥ 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需。
⑦ 在您的能力范围内，为了大环境的良性发展，请尽可能的选择正版资源。
⑧ 网站资源绝不做任何二次加密或添加后门（原版加密除外）

常见问题F&Q