給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

TaC 發表于 2025-4-22 22:34
這東西不錯，本地測試了下，有效果。
但這東西在默認模板上顯示不是很特別，logo圖片小了點。
我網站是透明 ...

width: 200%; /* 增加寬度，確保掃光覆蓋范圍 */

? ??height: 20px; /* 光帶的高度 */
修改數值，

哥特

這個挺不錯的啊，感謝分享

ysx24

可樂不加冰 發表于 2025-1-23 12:50
把代碼 放在 這里也可以 免去修改文件的煩惱

不清楚為什么，我這里添加的任何代碼都會完完整整的在首頁右下角顯示出來
也懶得去查原因

可樂不加冰

把代碼 放在 這里也可以 免去修改文件的煩惱

登錄/注冊后可看大圖