久久久久av_欧美日韩一区二区在线_国产精品三区四区_日韩中字在线

Discuz! 官方交流社區

標題: 給logo增加掃光效果 [打印本頁]
作者: ysx24    時間: 2025-1-22 19:16
標題: 給logo增加掃光效果
測試為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.     }

  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.     }

  31.     @keyframes flashlights {
  32.         0% { left: -100%; top: -50px; }
  33.         100% { left: 100%; top: 100px; }
  34.     }

  36. </style>
復制代碼

淺色背景
  1. <style>
  2.     /* 有logo增加陰影效果 */
  3.     /* Logo 掃光特效 */
  4.     .hdc h2 a {
  5.         overflow: hidden;
  6.         display: block;
  7.         position: relative;
  8.     }

  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.     }

  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); 中的參數，控制霧化的大小和透明度。
作者: 可樂不加冰    時間: 2025-1-23 12:50
把代碼 放在 這里也可以 免去修改文件的煩惱
(, 下載次數: 1)
作者: ysx24    時間: 2025-1-23 12:59
可樂不加冰 發表于 2025-1-23 12:50
把代碼 放在 這里也可以 免去修改文件的煩惱

不清楚為什么，我這里添加的任何代碼都會完完整整的在首頁右下角顯示出來
也懶得去查原因
作者: 哥特    時間: 2025-3-15 20:57
這個挺不錯的啊，感謝分享
作者: TaC    時間: 2025-4-22 22:34
這東西不錯，本地測試了下，有效果。
但這東西在默認模板上顯示不是很特別，logo圖片小了點。
我網站是透明底，主題列表頁面板塊名稱那里倒是有一個背景圖片，我想弄到這里。
怎么設置呢，指點一下。

我看了半天代碼，這代碼的特效怎么就跟logo掛上鉤了呢。主要引用logo代碼是哪個？
作者: ysx24    時間: 2025-4-22 23:53
TaC 發表于 2025-4-22 22:34
這東西不錯，本地測試了下，有效果。
但這東西在默認模板上顯示不是很特別，logo圖片小了點。
我網站是透明 ...

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

? ??height: 20px; /* 光帶的高度 */
修改數值，
作者: TaC    時間: 2025-4-23 00:22
ysx24 發表于 2025-4-22 23:53
width: 200%; /* 增加寬度，確保掃光覆蓋范圍 */

? ??height: 20px; /* 光帶的高度 */

你說的是修改logo，那怎么運用到主題列表頁面，板塊名稱那里。我修改了板塊名稱那個地方，有個背景圖，長的。應用到那里，是乎效果更明顯。
作者: TaC    時間: 2025-4-23 18:47
搞暈了頭，總算是搞定。借作者的代碼，分享下。

測試主題列表頁版塊信息，默認模板是沒有背景圖片的。如果目前模板或修改后，添加了背景圖片，讓背景圖片有掃光效果。
操作：
1，在CSS文件里查找背景圖片的樣式名稱，替換logo樣式名稱：hdc h2 a （樓主的掃光代碼）。
2，把修改過的代碼放到目前模板/forum/forumdisplay.htm或php文件。
     例：背景標簽<div class="b-bg"></div>
           下面即可。

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






歡迎光臨 Discuz! 官方交流社區 (http://www.9999xn.com/) Powered by Discuz! W1.0