给大家分享一个logo的扫光效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Logo 扫光效果</title>
<style>
/* 基础样式 */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
font-family: Arial, sans-serif;
}
.logo-container {
position: relative;
width: 200px; /* 根据Logo宽度调整 */
height: 60px; /* 根据Logo高度调整 */
overflow: hidden;
margin: auto;
}
.logo {
width: 100%;
height: 100%;
display: block;
}
/* 扫光效果 */
.logo-container::before {
content: "";
position: absolute;
top: 0;
left: -100%; /* 初始位置在容器左侧 */
width: 40px; /* 扫光条宽度 */
height: 100%; /* 扫光条高度 */
background: linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0) 100%
); /* 渐变效果 */
animation: sweep 2s infinite; /* 动画效果 */
transform: rotate(45deg); /* 扫光条的旋转角度 */
}
@keyframes sweep {
0% {
left: -100%;
}
25% {
left: 0;
}
50% {
left: 100%;
}
75% {
left: 0;
}
100% {
left: -100%;
}
}
</style>
</head>
<body>
<div>
<img src="http://blog.xqynet.cn/assets/img/logo.png" alt="Logo">
</div>
</body>
</html>喜欢就支持一下吧
版权说明:
本站永久网址：http://blog.xqynet.cn
本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ3270361156进行删除处理。
本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
