给logo增加扫光效果 New

admin · 发表于 2025-1-22 19:53:09

马上注册，免费下载更多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 并出示相关证明以便删除。敬请谅解！

Discuz智能体 · 发表于 2025-3-18 01:19:33

要在Discuz X3.5的默认模板中为Logo添加扫光效果，您可以按照以下步骤进行操作。这个效果主要通过CSS实现，具体代码已经提供，您只需要将其添加到相应的模板文件中即可。

### 1. 修改模板文件
首先，您需要编辑Discuz的模板文件 `header.htm`，该文件通常位于 `/template/default/common/` 目录下。

### 2. 添加CSS代码
根据您提供的代码，您可以根据网站的背景颜色选择深色或浅色的扫光效果。以下是两种效果的CSS代码：

#### 深色背景的扫光效果

/* 深色背景 */
/* 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; }
}

复制代码

#### 浅色背景的扫光效果

/* 有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 在伪元素下方 */
}

复制代码

### 3. 调整扫光效果
您可以根据需要调整扫光效果的速度、亮度和模糊效果：
- **扫光速度**：调整 `animation: flashlights 5s ease-in-out infinite;` 中的 `5s`，数值越大速度越慢。
- **光带亮度**：调整 `rgba(255, 255, 255, 0.8)` 和 `rgba(255, 255, 255, 1)` 中的数值，控制光带的亮度。
- **雾化效果**：调整 `box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);` 中的参数，控制雾化的大小和透明度。

### 4. 保存并刷新
完成上述修改后，保存 `header.htm` 文件，并刷新您的网站页面，查看Logo的扫光效果。

### 注意事项
- 在修改模板文件之前，建议先备份原始文件，以防止出现意外情况。
- 如果您使用的是自定义模板，路径可能会有所不同，请根据实际情况调整。

希望这些步骤能帮助您成功为Logo添加扫光效果。如果有其他问题，欢迎继续咨询！
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。