Via美化脚本

CEO

分享一款好看的描边脚本

1. // ==UserScript==
   
2. // @name         Via纯脉冲边框美化
   
3. // @namespace    via-border-pulse
   
4. // @version      1.3
   
5. // @match        *://*/*
   
6. // @grant        none
   
7. // @run-at       document-start
   
8. // ==/UserScript==
   
9. 
   
10. (function() {
    
11.     'use strict';
    
12. 
    
13.     const style = document.createElement('style');
    
14.     style.textContent = `
    
15. html, body {
    
16.     box-sizing: border-box;
    
17.     border: 2px solid transparent;
    
18.     border-radius: 6px;
    
19.     padding: 4px;
    
20.     animation: borderPulse 5s ease-in-out infinite;
    
21. }
    
22. 
    
23. @keyframes borderPulse {
    
24.     0%   { box-shadow: 0 0 8px #4facfe, 0 0 12px #4facfe66; }
    
25.     25%  { box-shadow: 0 0 8px #00f2fe, 0 0 12px #00f2fe66; }
    
26.     50%  { box-shadow: 0 0 8px #43e97b, 0 0 12px #43e97b66; }
    
27.     75%  { box-shadow: 0 0 8px #fa709a, 0 0 12px #fa709a66; }
    
28.     100% { box-shadow: 0 0 8px #4facfe, 0 0 12px #4facfe66; }
    
29. }
    
30. `;
    
31. 
    
32. document.documentElement.appendChild(style);
    
33. })();
    

复制代码

另外给via主页添加同样效果描边，从浏览器这里添加：
设置——定制——高级——自定义CSS

粘贴以下代码

1. /* 脉冲边框样式 */
   
2. html, body {
   
3.     box-sizing: border-box;
   
4.     border: 2px solid transparent;
   
5.     border-radius: 6px;
   
6.     padding: 4px;
   
7.     animation: borderPulse 5s ease-in-out infinite;
   
8. }
   
9. @keyframes borderPulse {
   
10.     0%   { box-shadow: 0 0 8px #4facfe, 0 0 12px #4facfe66; }
    
11.     25%  { box-shadow: 0 0 8px #00f2fe, 0 0 12px #00f2fe66; }
    
12.     50%  { box-shadow: 0 0 8px #43e97b, 0 0 12px #43e97b66; }
    
13.     75%  { box-shadow: 0 0 8px #fa709a, 0 0 12px #fa709a66; }
    
14.     100% { box-shadow: 0 0 8px #4facfe, 0 0 12px #4facfe66; }
    
15. }

复制代码

CEO

更新一下，解决描边偏移问题

1. /* 脉冲边框样式 —— 不影响页面布局版 */
   
2. body {
   
3.     position: relative;
   
4. }
   
5. 
   
6. body::before {
   
7.     content: '';
   
8.     position: fixed;
   
9.     inset: 0;
   
10.     box-sizing: border-box;
    
11.     border: 2px solid transparent;
    
12.     border-radius: 6px;
    
13.     padding: 4px;
    
14.     margin: 4px;
    
15.     pointer-events: none;
    
16.     z-index: 9999;
    
17.     animation: borderPulse 5s ease-in-out infinite;
    
18. }
    
19. 
    
20. @keyframes borderPulse {
    
21.     0%   { box-shadow: 0 0 8px #4facfe, 0 0 12px #4facfe66; }
    
22.     25%  { box-shadow: 0 0 8px #00f2fe, 0 0 12px #00f2fe66; }
    
23.     50%  { box-shadow: 0 0 8px #43e97b, 0 0 12px #43e97b66; }
    
24.     75%  { box-shadow: 0 0 8px #fa709a, 0 0 12px #fa709a66; }
    
25.     100% { box-shadow: 0 0 8px #4facfe, 0 0 12px #4facfe66; }
    
26. }

复制代码

优梨

学习一下

文心同学

有效果图吗，大佬

GoldApple1939

感谢分享

CEO

文心同学 发表于 2026-4-2 16:20
有效果图吗，大佬

自己设置一下吧，动态的，我不愿截图

lc29171519

来瞧瞧来看看，谢谢。

月挽星回

路过

꧁莫♡名꧂

看看