给logo增加扫光效果 New

admin · 发表于 4 小时前

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

测试为x3.5 默认模板 x3.4未测试，总的来说效果并不是很满意，有时间慢慢调整
1、深色顶部或者logo
/template/default/common/header.htm
查找</head>
上面添加

<style> /* 深色背景 */ /* Logo 扫光特效 */ .hdc h2 a { overflow: hidden; display: block; position: relative; } .hdc h2 a:before { content: ""; position: absolute; top: -50px; left: -100%; width: 200%; /* 增加宽度，确保扫光覆盖范围 */ height: 20px; /* 光带的高度 */ background: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 25%, /* 左侧淡化，降低亮度 */ rgba(255, 255, 255, 0.5) 50%, /* 中间高亮，降低亮度 */ rgba(255, 255, 255, 0.3) 75%, /* 右侧淡化，降低亮度 */ rgba(255, 255, 255, 0) 100% /* 完全透明 */ ); transform: rotate(-45deg); animation: flashlights 5s ease-in-out infinite; /* 5s 控制扫光速度，数值越大越慢 */ z-index: 2; /* 确保伪元素在 Logo 上方 */ filter: blur(10px); /* 添加模糊效果，使光线更柔和 */ } @keyframes flashlights { 0% { left: -100%; top: -50px; } 100% { left: 100%; top: 100px; } }</style>

复制代码

浅色背景

<style> /* 有logo增加阴影效果 */ /* Logo 扫光特效 */ .hdc h2 a { overflow: hidden; display: block; position: relative; } .hdc h2 a:before { content: ""; position: absolute; top: -50px; left: -100%; width: 200%; /* 增加宽度，确保扫光覆盖范围 */ height: 20px; /* 光带的高度 */ background: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 25%, /* 左侧淡化 */ rgba(255, 255, 255, 0.9) 50%, /* 中间高亮 */ rgba(255, 255, 255, 0.6) 75%, /* 右侧淡化 */ rgba(255, 255, 255, 0) 100% /* 完全透明 */ ); transform: rotate(-45deg); animation: flashlights 2.5s ease-in-out infinite; /* 2.5s 控制扫光速度，数字越大越慢 */ z-index: 2; /* 确保伪元素在 Logo 上方 */ filter: blur(10px); /* 添加模糊效果，使光线更柔和 */ } @keyframes flashlights { 0% { left: -100%; top: -50px; } 100% { left: 100%; top: 100px; } }/* 为 Logo 添加阴影 */ .hdc h2 a img { position: relative; /* 确保阴影生效 */ filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3)); /* 添加阴影 */ z-index: 1; /* 确保 Logo 在伪元素下方 */ }</style>

复制代码

扫光速度：调整 animation: flashlights 1.5s ease-in 1s infinite; 中的 1.5s，数值越大速度越慢。

光带亮度：调整 rgba(255, 255, 255, 0.8) 和 rgba(255, 255, 255, 1) 中的数值，控制光带的亮度。

雾化效果：调整 box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); 中的参数，控制雾化的大小和透明度。

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
网站部分内容来源于网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

给logo增加扫光效果 New

马上注册，免费下载更多dz插件网资源。

回复

More猜你喜欢

关于我们

服务支持

discuzaddons@vip.qq.com