使用JavaScript代码为Ritheme的Logo添加扫光效果

owenlee

如果直接编辑PHP文件让您感到不安，可以尝试通过主题的functions.php文件添加JavaScript代码来实现效果。先完成以下准备工作：

• 找到您网站的Logo图片的CSS选择器：
  
  
  
  
  • 这是最关键的一步。我们需要知道您网站Logo的“名字”（CSS选择器），才能为它添加特效。
  • 打开您的网站首页，在Logo图片上点击鼠标右键，选择 “检查” (Inspect) 或 “检查元素” (Inspect Element)。这会打开浏览器的开发者工具。
  • 开发者工具会高亮显示Logo对应的HTML代码。通常它是一个 <img> 标签，并且有一个像 class="site-logo" 或 id="logo" 这样的属性。
  • 最常见的选择器示例：
    
    
    • .site-logo img
    • .custom-logo-link img
    • #site-logo
    • #logo img
      
      
  • 您需要找到属于您自己主题的那个。如果不确定，可以告诉我您的网站网址，我帮您看一下。
    
    2、在「主题文件编辑器」中，找到并选择「Functions (functions.php)」，文件末尾添加以下代码：
    
    

1. // 添加Logo扫光效果
   
2. function add_logo_shine_effect() {
   
3.     ?>
   
4.     <script>
   
5.     document.addEventListener('DOMContentLoaded', function() {
   
6.         // 找到Logo元素
   
7.         var logo = document.querySelector('.logo.regular');
   
8.         
   
9.         if (logo) {
   
10.             // 创建包装元素
    
11.             var wrapper = document.createElement('div');
    
12.             wrapper.style.position = 'relative';
    
13.             wrapper.style.display = 'inline-block';
    
14.             wrapper.style.overflow = 'hidden';
    
15.             
    
16.             // 创建扫光元素
    
17.             var shine = document.createElement('div');
    
18.             shine.style.position = 'absolute';
    
19.             shine.style.top = '0';
    
20.             shine.style.left = '-100%';
    
21.             shine.style.width = '60%';
    
22.             shine.style.height = '100%';
    
23.             shine.style.background = 'linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 100%)';
    
24.             shine.style.transform = 'skewX(-25deg)';
    
25.             shine.style.pointerEvents = 'none';
    
26.             shine.style.zIndex = '999';
    
27.             shine.style.animation = 'sweep 3s infinite';
    
28.             
    
29.             // 添加动画关键帧
    
30.             var style = document.createElement('style');
    
31.             style.textContent = `
    
32.                 @keyframes sweep {
    
33.                     0% { left: -100%; }
    
34.                     100% { left: 100%; }
    
35.                 }
    
36.             `;
    
37.             
    
38.             // 重新组织DOM结构
    
39.             var parent = logo.parentNode;
    
40.             parent.replaceChild(wrapper, logo);
    
41.             wrapper.appendChild(logo);
    
42.             wrapper.appendChild(shine);
    
43.             document.head.appendChild(style);
    
44.         }
    
45.     });
    
46.     </script>
    
47.     <?php
    
48. }
    
49. add_action('wp_footer', 'add_logo_shine_effect');

复制代码

3、点击「更新文件」保存更改。

如果以上两种方法都无效，可能是以下原因：

• 缓存问题：清除浏览器缓存和WordPress缓存（如果您使用了缓存插件）
• 主题更新：确保您的Ritheme主题是最新版本
• JavaScript冲突：可能有其他JavaScript代码与我们的代码冲突
  
  

最后的建议

考虑到您已经尝试了多种方法，我建议：

• 联系Ritheme主题的官方支持，询问他们实现Logo扫光效果的最佳方式
• 考虑使用一个更简单的CSS悬停效果替代扫光效果，例如：
  
  

1. .logo.regular:hover {
   
2.     filter: brightness(1.2);
   
3.     transition: filter 0.3s ease;
   
4. }

复制代码

owenlee

在您成功的JavaScript代码中，这几个参数是最关键的调整点：

1. 扫光速度控制

1. shine.style.animation = 'sweep 3s infinite';
   
2. // 和
   
3. style.textContent = `
   
4.     @keyframes sweep {
   
5.         0% { left: -100%; }
   
6.         100% { left: 100%; }
   
7.     }
   
8. `;

复制代码

• 3s：动画持续时间
  
  
  • 调小（如 2s）→ 光条移动更快，效果更急促
  • 调大（如 5s）→ 光条移动更慢，效果更优雅平滑
  • 推荐范围：2s - 6s
    
    

2. 光条宽度和亮度

1. shine.style.width = '60%';
   
2. shine.style.background = 'linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 100%)';

复制代码

• width: '60%'：光条的宽度
  
  
  • 调小（如 40%）→ 更细的光条，效果更精致
  • 调大（如 80%）→ 更宽的光条，效果更强烈
  • 推荐范围：40% - 80%
    
    
• rgba(255, 255, 255, 0.7)：光条的亮度和透明度
  
  
  • 调小最后一位数字（如 0.4）→ 光条更透明，效果更 subtle
  • 调大最后一位数字（如 0.9）→ 光条更亮，效果更明显
  • 推荐范围：0.3 - 0.9
    
    

3. 光条角度和形状

1. shine.style.transform = 'skewX(-25deg)';

复制代码

• skewX(-25deg)：光条的倾斜角度
  
  
  • 数值越小（如 -15deg）→ 光条更直立，扫过面积更大
  • 数值越大（如 -35deg）→ 光条更倾斜，效果更动感
  • 推荐范围：-15deg - -35deg
    
    

4. 动画节奏和流畅度

1. shine.style.animation = 'sweep 3s ease-in-out infinite';

复制代码

• ease-in-out：动画的时间函数（节奏）
  
  
  • ease-in-out → 慢开始，中间快，慢结束（默认，最自然）
  • linear → 匀速运动（机械感强）
  • ease-in → 慢开始，快结束
  • ease-out → 快开始，慢结束
    
    

实用调整示例

这里是一些常见的效果预设，您可以直接复制使用：

示例1：快速细光效果

1. shine.style.width = '40%';
   
2. shine.style.animation = 'sweep 2s ease-in-out infinite';
   
3. shine.style.background = 'linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%)';

复制代码

示例2：慢速宽光效果

1. shine.style.width = '70%';
   
2. shine.style.animation = 'sweep 5s linear infinite';
   
3. shine.style.background = 'linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%)';

复制代码

示例3：金色光效[size=12.573px]

1. // 将白色光改为金色光
   
2. shine.style.background = 'linear-gradient(to right, rgba(255, 215, 0, 0) 0%, rgba(255, 215, 0, 0.5) 50%, rgba(255, 215, 0, 0) 100%)';

复制代码

调整方法：回到「主题文件编辑器」中的「Functions (functions.php)」，找到我们之前添加的JavaScript代码，修改相应的参数值，点击「更新文件」

强制刷新浏览器（按Ctrl+F5）以清除缓存查看效果

调试技巧：如果调整后效果不理想，您可以：每次只调整一个参数，便于观察效果变化，使用浏览器的开发者工具（F12）先实时调整，找到理想值后再更新代码，在不同屏幕尺寸下测试效果，确保在各种设备上都表现良好。

记住，这些调整都是完全可逆的，您可以随时修改参数或完全移除效果，不会对网站造成任何损害。希望这些说明能帮助您完美定制扫光效果！如果还有任何疑问，请回复此帖。