給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>
           下面即可。

最后細節就根據各位喜好去調節了。