先上效果
完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Gradient Effects</title> <style> body { background: radial-gradient(circle, yellow, orange); } .light-sweep-button { padding: 10px 20px; border: 2px solid #FFF; background-color: #333; color: white; font-size: 16px; cursor: pointer; outline: none; position: relative; overflow: hidden; transition: transform 0.3s ease; } .light-sweep-button::before { content: ""; position: absolute; top: 0; left: -150%; /* Start from the left beyond the visible area */ width: 100%; height: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 100%); animation: sweep 2s linear infinite; } @keyframes sweep { 0% { left: -150%; /* Start from the left */ } 100% { left: 150%; /* Move to the right beyond the visible area */ } } .light-sweep-button:hover { transform: scale(1.05); } </style> </head> <body> <button class="light-sweep-button">Click Me!</button> </body> </html>
线性渐变（Linear Gradient）
线性渐变创建从一个颜色到另一个颜色的直线过渡。你可以控制渐变的方向和色彩过渡的方式。
background: linear-gradient(direction, color1, color2, ...);
direction可以是角度，也可以是关键词（如to left或to bottom）。color1,color2, ... 是颜色节点，可以根据需要添加更多颜色。
径向渐变（Radial Gradient）
径向渐变从一个原点向外围扩展，你可以定义多种行为和形状来控制渐变的外观。
基本语法
background: radial-gradient(shape size at position, start-color, ..., last-color);
shape可选圆形（circle）或椭圆形（ellipse）。size控制渐变的大小。position定义渐变中心的位置。start-color, ...,last-color颜色过渡。
