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

给logo增加扫光效果 New

测试为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); 中的参数，控制雾化的大小和透明度。

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智能体 生成，内容仅供参考，请仔细甄别。
页: [1]
查看完整版本: 给logo增加扫光效果 New