·设为首页收藏本站📧邮箱修改🎁免费下载专区📒收藏夹👽聊天室📱AI智能体
返回列表 发布新帖

给logo增加扫光效果 New

158 1
发表于 2025-1-22 19:53:09 | 查看全部 阅读模式

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

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

×
测试为x3.5 默认模板 x3.4未测试,总的来说效果并不是很满意,有时间慢慢调整
1、深色顶部或者logo
/template/default/common/header.htm
查找</head>
上面添加
  1. <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>
复制代码
浅色背景
  1. <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); 中的参数,控制雾化的大小和透明度。
我要说一句 收起回复
一花一世界,一叶一追寻。一曲一场叹,一生为一人。

评论1

Discuz智能体Lv.8 发表于 2025-3-18 01:19:33 | 查看全部
要在Discuz X3.5的默认模板中为Logo添加扫光效果,您可以按照以下步骤进行操作。这个效果主要通过CSS实现,具体代码已经提供,您只需要将其添加到相应的模板文件中即可。

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

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

#### 深色背景的扫光效果
  1. /* 深色背景 */
  2. /* Logo 扫光特效 */
  3. .hdc h2 a {
  4.     overflow: hidden;
  5.     display: block;
  6.     position: relative;
  7. }
  8. .hdc h2 a:before {
  9.     content: "";
  10.     position: absolute;
  11.     top: -50px;
  12.     left: -100%;
  13.     width: 200%; /* 增加宽度,确保扫光覆盖范围 */
  14.     height: 20px; /* 光带的高度 */
  15.     background: linear-gradient(
  16.         90deg,
  17.         rgba(255, 255, 255, 0) 0%,
  18.         rgba(255, 255, 255, 0.3) 25%, /* 左侧淡化,降低亮度 */
  19.         rgba(255, 255, 255, 0.5) 50%, /* 中间高亮,降低亮度 */
  20.         rgba(255, 255, 255, 0.3) 75%, /* 右侧淡化,降低亮度 */
  21.         rgba(255, 255, 255, 0) 100% /* 完全透明 */
  22.     );
  23.     transform: rotate(-45deg);
  24.     animation: flashlights 5s ease-in-out infinite; /* 5s 控制扫光速度,数值越大越慢 */
  25.     z-index: 2; /* 确保伪元素在 Logo 上方 */
  26.     filter: blur(10px); /* 添加模糊效果,使光线更柔和 */
  27. }
  28. @keyframes flashlights {
  29.     0% { left: -100%; top: -50px; }
  30.     100% { left: 100%; top: 100px; }
  31. }
复制代码


#### 浅色背景的扫光效果
  1. /* 有logo增加阴影效果 */
  2. /* Logo 扫光特效 */
  3. .hdc h2 a {
  4.     overflow: hidden;
  5.     display: block;
  6.     position: relative;
  7. }
  8. .hdc h2 a:before {
  9.     content: "";
  10.     position: absolute;
  11.     top: -50px;
  12.     left: -100%;
  13.     width: 200%; /* 增加宽度,确保扫光覆盖范围 */
  14.     height: 20px; /* 光带的高度 */
  15.     background: linear-gradient(
  16.         90deg,
  17.         rgba(255, 255, 255, 0) 0%,
  18.         rgba(255, 255, 255, 0.6) 25%, /* 左侧淡化 */
  19.         rgba(255, 255, 255, 0.9) 50%, /* 中间高亮 */
  20.         rgba(255, 255, 255, 0.6) 75%, /* 右侧淡化 */
  21.         rgba(255, 255, 255, 0) 100% /* 完全透明 */
  22.     );
  23.     transform: rotate(-45deg);
  24.     animation: flashlights 2.5s ease-in-out infinite; /* 2.5s 控制扫光速度,数字越大越慢 */
  25.     z-index: 2; /* 确保伪元素在 Logo 上方 */
  26.     filter: blur(10px); /* 添加模糊效果,使光线更柔和 */
  27. }
  28. @keyframes flashlights {
  29.     0% { left: -100%; top: -50px; }
  30.     100% { left: 100%; top: 100px; }
  31. }
  32. /* 为 Logo 添加阴影 */
  33. .hdc h2 a img {
  34.     position: relative; /* 确保阴影生效 */
  35.     filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3)); /* 添加阴影 */
  36.     z-index: 1; /* 确保 Logo 在伪元素下方 */
  37. }
复制代码


### 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智能体 生成,内容仅供参考,请仔细甄别。
我要说一句 收起回复

回复

 懒得打字嘛,点击右侧快捷回复【查看最新发布】   【应用商城享更多资源】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

图文热点
关闭

站长推荐

点我👉扫码添加站长微信,获取即时帮助!
点我👉扫码添加站长微信,获取即时帮助!
遇到问题别担心,添加站长微信,第一时间为您解决!专属客服在线等,享受一对一服务!

查看 »

AI智能体
投诉/建议联系

discuzaddons@vip.qq.com

未经授权禁止转载,复制和建立镜像,
如有违反,按照公告处理!!!
  • 联系QQ客服
  • 添加微信客服

联系DZ插件网微信客服|最近更新|Archiver|手机版|小黑屋|DZ插件网! ( 鄂ICP备20010621号-1 )|网站地图

您的IP:18.220.47.149,GMT+8, 2025-4-2 18:18 , Processed in 0.249677 second(s), 79 queries , Gzip On, Redis On.

Powered by Discuz! X5.0 Licensed

© 2001-2025 Discuz! Team.

关灯 在本版发帖
扫一扫添加微信客服
QQ客服
快速回复 返回顶部 返回列表