HTML&CSS：流光按钮，一看就会

这段 HTML 代码创建了一个具有动态颜色旋转效果的按钮



HTML&CSS

1. <!DOCTYPE html>
   
2. <html lang="en">
   
3. 
   
4. <head>
   
5.     <meta charset="UTF-8">
   
6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
7.     <title>公众号关注：前端Hardy</title>
   
8.     <style>
   
9.         body {
   
10.             margin: 0;
    
11.             padding: 0;
    
12.             background: #212121;
    
13.             display: flex;
    
14.             align-items: center;
    
15.             justify-content: center;
    
16.             height: 100vh;
    
17.         }
    
18.         button {
    
19.             background-image: linear-gradient(oklch(59%56%259deg), oklch(59%56%259deg)), conic-gradient(from var(--angle-to-the-dangle), oklch(59%56%259deg) 0deg, white 20deg, oklch(59%56%259deg) 40deg);
    
20.             background-clip: padding-box, border-box;
    
21.             background-position: center center;
    
22.             background-size: 170px500px;
    
23.             border-radius: 12px;
    
24.             color: white;
    
25.             padding: 1rem2rem;
    
26.             font-size: 1.5rem;
    
27.             border: 2px solid transparent;
    
28.         }
    
29.     </style>
    
30. </head>
    
31. 
    
32. <body>
    
33.     <button id="rotateButton">添加资源</button>
    
34.     <script>
    
35.         const button = document.getElementById('rotateButton');
    
36.         let angle = 0;
    
37.         function rotateColors() {
    
38.             angle = (angle + 2) % 360;
    
39.             button.style.setProperty('--angle-to-the-dangle', `${angle}deg`);
    
40.             requestAnimationFrame(rotateColors);
    
41.         }
    
42.         rotateColors();
    
43.     </script>
    
44. </body>
    
45. 
    
46. </html>

复制代码

HTML 结构
rotateButton：定义一个按钮，文本为“添加资源”，ID 为“rotateButton”.
CSS 样式
body 样式：设置页面的边距为 0，背景颜色为深灰色，使用 flex 布局使内容居中显示，页面高度为视口高度（100vh）.
button 样式：定义按钮的背景图像、剪裁、位置、尺寸、边框、颜色、内边距和字体大小.
background-image：使用线性渐变和圆锥渐变组合，创建一个动态的颜色旋转效果.
linear-gradient(oklch(59% 56% 259deg), oklch(59% 56% 259deg))：线性渐变，颜色从一个角度到另一个角度变化.
conic-gradient(from var(--angle-to-the-dangle), oklch(59% 56% 259deg) 0deg, white 20deg, oklch(59% 56% 259deg) 40deg)：圆锥渐变，颜色从一个角度到另一个角度变化，使用自定义属性--angle-to-the-dangle 控制旋转角度.
background-clip：设置背景图像的剪裁区域，padding-box 和 border-box 分别表示内边距区域和边框区域.
background-position：设置背景图像的位置为居中.
background-size：设置背景图像的尺寸为 170px 500px.
border-radius：设置按钮的圆角大小为 12px.
color：设置按钮文本的颜色为白色.
padding：设置按钮的内边距为 1rem 2rem.
font-size：设置按钮文本的字体大小为 1.5rem.
border：设置按钮的边框为 2px 宽，颜色为透明.
JS
获取按钮元素.
定义变量 angle 用于存储旋转角度.
rotateColors 函数：更新旋转角度，设置按钮的自定义属性--angle-to-the-dangle，使用 requestAnimationFrame 递归调用自身，实现颜色的动态旋转效果.
调用 rotateColors 函数开始颜色旋转动画.