<!doctype html>
<html>
<head>
<meta set="utf-8">
<title>纯CSS实现Logo图片扫光效果</title>
<style>
.ilogo {
position: relative;
float: center;
margin: 18px 0 0 5px;
overflow: hidden;
transition-duration: 50s;/**动画时间**/
}
.ilogo:before {
content: "";
position: absolute;
width: 1000px;
height: 100px; /**光标的宽度，可根据实际调整**/
background-image: linear-gradient(to bottom,transparent,rgba(255,255,255,.3),transparent);
-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;
-o-animation: searchLights 1s ease-in 1s infinite;
animation: searchLights 1s ease-in 1s infinite; /**第一个数字参数控制扫光速度，数字越大越慢**/
}
@keyframes searchLights {
0% {
left: -200px;
top: -300px;
}
100% {
left: -160px;
top: 800px;
}
}
</style>
</head>
<body>
<div class="ilogo">
<h1 class="ititle">
<a href=""><div style="text-align:center;">
<img src="https://zeusdream.com/data/attachment/forum/202308/31/191516iu1zl0qlzzjjo0i5.png">
</a></div>
</h1>
</div>
</body>
</html> | 
發表於 2023-8-15 16:21:05
發表於 2023-9-1 01:50:15