返回列表 发帖
查看: 234|回复: 2

给logo增加扫光效果

312

主题

1302

回帖

1795

积分

已臻大成

贡献
12 点
金币
10 个
发表于 2025-1-22 19:16:22 | 显示全部楼层 |阅读模式
测试为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.     .hdc h2 a:before {
  10.         content: "";
  11.         position: absolute;
  12.         top: -50px;
  13.         left: -100%;
  14.         width: 200%; /* 增加宽度,确保扫光覆盖范围 */
  15.         height: 20px; /* 光带的高度 */
  16.         background: linear-gradient(
  17.             90deg,
  18.             rgba(255, 255, 255, 0) 0%,
  19.             rgba(255, 255, 255, 0.3) 25%, /* 左侧淡化,降低亮度 */
  20.             rgba(255, 255, 255, 0.5) 50%, /* 中间高亮,降低亮度 */
  21.             rgba(255, 255, 255, 0.3) 75%, /* 右侧淡化,降低亮度 */
  22.             rgba(255, 255, 255, 0) 100% /* 完全透明 */
  23.         );
  24.         transform: rotate(-45deg);
  25.         animation: flashlights 5s ease-in-out infinite; /* 5s 控制扫光速度,数值越大越慢 */
  26.         z-index: 2; /* 确保伪元素在 Logo 上方 */
  27.         filter: blur(10px); /* 添加模糊效果,使光线更柔和 */
  28.     }

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

  33. </style>
复制代码

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

  9.     .hdc h2 a:before {
  10.         content: "";
  11.         position: absolute;
  12.         top: -50px;
  13.         left: -100%;
  14.         width: 200%; /* 增加宽度,确保扫光覆盖范围 */
  15.         height: 20px; /* 光带的高度 */
  16.         background: linear-gradient(
  17.             90deg,
  18.             rgba(255, 255, 255, 0) 0%,
  19.             rgba(255, 255, 255, 0.6) 25%, /* 左侧淡化 */
  20.             rgba(255, 255, 255, 0.9) 50%, /* 中间高亮 */
  21.             rgba(255, 255, 255, 0.6) 75%, /* 右侧淡化 */
  22.             rgba(255, 255, 255, 0) 100% /* 完全透明 */
  23.         );
  24.         transform: rotate(-45deg);
  25.         animation: flashlights 2.5s ease-in-out infinite; /* 2.5s 控制扫光速度,数字越大越慢 */
  26.         z-index: 2; /* 确保伪元素在 Logo 上方 */
  27.         filter: blur(10px); /* 添加模糊效果,使光线更柔和 */
  28.     }

  29.     @keyframes flashlights {
  30.         0% { left: -100%; top: -50px; }
  31.         100% { left: 100%; top: 100px; }
  32.     }
  33. /* 为 Logo 添加阴影 */
  34.     .hdc h2 a img {
  35.         position: relative; /* 确保阴影生效 */
  36.         filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3)); /* 添加阴影 */
  37.         z-index: 1; /* 确保 Logo 在伪元素下方 */
  38.     }
  39. </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); 中的参数,控制雾化的大小和透明度。
回复

使用道具 举报

20

主题

212

回帖

309

积分

炉火纯青

贡献
4 点
金币
20 个
发表于 2025-1-23 12:50:15 | 显示全部楼层
把代码 放在 这里也可以 免去修改文件的烦恼
PixPin_2025-01-23_12-48-39.png
回复 支持 反对

使用道具 举报

312

主题

1302

回帖

1795

积分

已臻大成

贡献
12 点
金币
10 个
 楼主| 发表于 2025-1-23 12:59:07 来自手机 | 显示全部楼层
可乐不加冰 发表于 2025-1-23 12:50
把代码 放在 这里也可以 免去修改文件的烦恼

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

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

  • 关注公众号
  • 有偿服务微信
  • 有偿服务QQ

手机版|小黑屋|Discuz! 官方交流社区 ( 皖ICP备16010102号 |皖公网安备34010302002376号 )|网站地图|star

GMT+8, 2025-2-10 00:57 , Processed in 0.052794 second(s), 9 queries , Redis On.

Powered by Discuz! W1.0 Licensed

Cpoyright © 2001-2024 Discuz! Team.

关灯 在本版发帖
有偿服务QQ
有偿服务微信
返回顶部
快速回复 返回顶部 返回列表