97久久国产亚洲精品超碰热,成人又色又爽的免费网站,色偷偷女人的天堂a,男女高潮喷水在线观看,国内精品一线二线三线区别在哪里

Discuz! 官方交流社區(qū)

標(biāo)題: 給logo增加掃光效果 [打印本頁(yè)]
作者: ysx24    時(shí)間: 2025-1-22 19:16
標(biāo)題: 給logo增加掃光效果
測(cè)試為x3.5 默認(rèn)模板 x3.4未測(cè)試，總的來(lái)說(shuō)效果并不是很滿(mǎn)意，有時(shí)間慢慢調(diào)整
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%, /* 左側(cè)淡化，降低亮度 */
  21.             rgba(255, 255, 255, 0.5) 50%, /* 中間高亮，降低亮度 */
  22.             rgba(255, 255, 255, 0.3) 75%, /* 右側(cè)淡化，降低亮度 */
  23.             rgba(255, 255, 255, 0) 100% /* 完全透明 */
  24.         );
  25.         transform: rotate(-45deg);
  26.         animation: flashlights 5s ease-in-out infinite; /* 5s 控制掃光速度，數(shù)值越大越慢 */
  27.         z-index: 2; /* 確保偽元素在 Logo 上方 */
  28.         filter: blur(10px); /* 添加模糊效果，使光線(xiàn)更柔和 */
  29.     }

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

  36. </style>
復(fù)制代碼

淺色背景
  1. <style>
  2.     /* 有l(wèi)ogo增加陰影效果 */
  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%, /* 左側(cè)淡化 */
  21.             rgba(255, 255, 255, 0.9) 50%, /* 中間高亮 */
  22.             rgba(255, 255, 255, 0.6) 75%, /* 右側(cè)淡化 */
  23.             rgba(255, 255, 255, 0) 100% /* 完全透明 */
  24.         );
  25.         transform: rotate(-45deg);
  26.         animation: flashlights 2.5s ease-in-out infinite; /* 2.5s 控制掃光速度，數(shù)字越大越慢 */
  27.         z-index: 2; /* 確保偽元素在 Logo 上方 */
  28.         filter: blur(10px); /* 添加模糊效果，使光線(xiàn)更柔和 */
  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>
復(fù)制代碼

掃光速度：調(diào)整 animation: flashlights 1.5s ease-in 1s infinite; 中的 1.5s，數(shù)值越大速度越慢。

光帶亮度：調(diào)整 rgba(255, 255, 255, 0.8) 和 rgba(255, 255, 255, 1) 中的數(shù)值，控制光帶的亮度。

霧化效果：調(diào)整 box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); 中的參數(shù)，控制霧化的大小和透明度。
作者: 可樂(lè)不加冰    時(shí)間: 2025-1-23 12:50
把代碼 放在 這里也可以 免去修改文件的煩惱
(, 下載次數(shù): 30)
作者: ysx24    時(shí)間: 2025-1-23 12:59
可樂(lè)不加冰 發(fā)表于 2025-1-23 12:50
把代碼 放在 這里也可以 免去修改文件的煩惱

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

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

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

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

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

你說(shuō)的是修改logo，那怎么運(yùn)用到主題列表頁(yè)面，板塊名稱(chēng)那里。我修改了板塊名稱(chēng)那個(gè)地方，有個(gè)背景圖，長(zhǎng)的。應(yīng)用到那里，是乎效果更明顯。
作者: TaC    時(shí)間: 2025-4-23 18:47
搞暈了頭，總算是搞定。借作者的代碼，分享下。

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

最后細(xì)節(jié)就根據(jù)各位喜好去調(diào)節(jié)了。






歡迎光臨 Discuz! 官方交流社區(qū) (http://r615.cn/) Powered by Discuz! X5.0