给logo增加扫光效果

ysx24

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

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

复制代码

浅色背景

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

可乐不加冰

把代码 放在 这里也可以 免去修改文件的烦恼

ysx24

可乐不加冰 发表于 2025-1-23 12:50
把代码 放在 这里也可以 免去修改文件的烦恼

不清楚为什么，我这里添加的任何代码都会完完整整的在首页右下角显示出来
也懒得去查原因

哥特

这个挺不错的啊，感谢分享

TaC

这东西不错，本地测试了下，有效果。
但这东西在默认模板上显示不是很特别，logo图片小了点。
我网站是透明底，主题列表页面板块名称那里倒是有一个背景图片，我想弄到这里。
怎么设置呢，指点一下。

我看了半天代码，这代码的特效怎么就跟logo挂上钩了呢。主要引用logo代码是哪个？

ysx24

TaC 发表于 2025-4-22 22:34
这东西不错，本地测试了下，有效果。
但这东西在默认模板上显示不是很特别，logo图片小了点。
我网站是透明 ...

width: 200%; /* 增加宽度，确保扫光覆盖范围 */

    height: 20px; /* 光带的高度 */
修改数值，

TaC

ysx24 发表于 2025-4-22 23:53
width: 200%; /* 增加宽度，确保扫光覆盖范围 */

    height: 20px; /* 光带的高度 */

你说的是修改logo，那怎么运用到主题列表页面，板块名称那里。我修改了板块名称那个地方，有个背景图，长的。应用到那里，是乎效果更明显。

TaC

搞晕了头，总算是搞定。借作者的代码，分享下。

测试主题列表页版块信息，默认模板是没有背景图片的。如果目前模板或修改后，添加了背景图片，让背景图片有扫光效果。
操作：
1，在CSS文件里查找背景图片的样式名称，替换logo样式名称：hdc h2 a （楼主的扫光代码）。
2，把修改过的代码放到目前模板/forum/forumdisplay.htm或php文件。
     例：背景标签<div class="b-bg"></div>
           下面即可。

最后细节就根据各位喜好去调节了。