纯CSS3：鼠标移上后(悬停)图片/文字出现扫光效果
作者:admin 时间:2022-3-26 12:34:25 浏览:在前一文中，我们介绍了纯CSS3实现图片/logo/文字扫光效果，该扫光效果是加载后自动无限循环的，本文将更进一步，加上鼠标悬停事件，即是只有鼠标移上去后，图片/文字才出现扫光效果。
这个其实只是在原代码的基础上，稍微修改了一下CSS代码就可以实现。
完整HTML代码如下：
<!DOCTYPE html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.ilogo {
position: relative;
float: left;
margin: 18px 0 0 5px;
overflow: hidden;
}
.ititle {
font-size: 50px;
}
.ilogo:hover:before {
content: "";
position: absolute;
width: 1000px;
height: 30px; /**白光的宽度，可根据实际调整**/
background-image: linear-gradient(to bottom,transparent,rgba(255,255,255,.5),transparent);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: searchLights 2s ease-in 1s infinite;
-o-animation: searchLights 2s ease-in 1s infinite;
animation: searchLights 2s ease-in 0s infinite; /**第一个数字参数控制扫光速度，数字越大越慢**/
}
@keyframes searchLights {
0% {
left: -200px;
top: -300px;
}
100% {
left: -160px;
top: 800px;
}
}
</style>
</head>
<body>
<div class="ilogo">
<h1 class="ititle">
<a href="#">
卡卡测速网 webkaka.com
</a>
</h1>
</div>
</body>
</html>
代码解释
.ilogo:hover:before {} 是表示只有鼠标悬停时，才触发该(动画)事件。如果去掉:hover，变为.ilogo:hover:before {}，那么就是自动无限循环运动。
示例是文字扫光效果，如果你要实现图片扫光效果，那么把HTML里的文字改为图片标签<img ...>即可。
4、animation属性是定义动画的运动方式、运动时间等。示例中searchLights是动画集名称，2s是动画(扫光)时间，ease-in是运动方式(加速运动)，0s是动画延迟(执行)时间，即是连续循环运动不用延迟，infinite是无限循环运动。关于animation的动画属性，可以参考如下文章了解更多：
相关文章
相关文章
x
- 站长推荐
