Great radial-gradientcolor background animation

2026-10-05 09:13

以下是一些使用CSS实现很棒的径向渐变色彩背景动画的方法： **一、基本的径向渐变设置** 1. **普通径向渐变** - 语法：`background - image:radial - gradient(颜色1,颜色2);` - 例如：`background - image:radial - gradient(#f00, #ffa500);`这将创建一个从红色（#f00）到橙色（#ffa500）的径向渐变背景。 2. **带有形状、大小和位置的径向渐变** - 语法：`background - image:radial - gradient(shape size position, color1,color2,color3...);` - 其中，`shape`可以是`circle`（圆形）或者`ellipse`（椭圆）;`size`可以是`closest - side`（指定径向渐变的半径长度为从圆心到离圆心最近的边）、`closest - corner`（指定径向渐变的半径长度为从圆心到离圆心最近的角）、`farthest - side`（指定径向渐变的半径长度为从圆心到离圆心最远的边）、`farthest - corner`（指定径向渐变的半径长度为从圆心到离圆心最远的角）;`position`用于指定圆心的位置。 - 例如：`background - image:radial - gradient(circle closest - side at 50% 50%, #f00, #00f);`创建一个以中心（50% 50%）为圆心，半径到最近边的圆形径向渐变，从红色（#f00）到蓝色（#00f）。 **二、动画设置** 1. **简单的背景位置动画** - 可以使用`@keyframes`规则来创建动画帧。例如： ```css @-webkit - keyframes gradient { from { background - position: top; } to { background - position: bottom; } } @keyframes gradient { from { background - position: top; } to { background - position: bottom; } } html, body { height: 100%; width: 100%; } body { -webkit - animation: gradient 39s ease 0s infinite alternate; animation: gradient 39s ease 0s infinite alternate; background: -webkit - radial - gradient(50% 100%, circle, #f00, #ffa500, #ff0, #008000, #00f, #800080); background: radial - gradient(circle at 50% 100%, #f00, #ffa500, #ff0, #008000, #00f, #800080); background - size: 300%; } ``` - 这里创建了一个名为`gradient`的动画，在39秒内无限交替地改变背景位置，背景使用了一个径向渐变，包含多种颜色。 2. **渐变跟随鼠标光标动画（悬停效果）** - 首先声明`--x`和`--y`两个CSS变量，用于跟踪鼠标在按钮上的位置，声明一个`--size`的CSS变量用于修改背景渐变的尺寸大小。 - 使用`background:radial - gradient(circle closest - side, pink, transparent)`创建按钮的径向渐变背景效果。 - 使用`document.querySelector()`和`EventTarget.addEventListener()`给按钮绑定`'mousemove'`事件。 - 使用`element.getBoundingClientRect()`和`CSSStyleDeclaration.setProperty()`更新`--x`和`--y`变量的值。示例代码如下： ```html Hover me ``` ```css /*按钮基本样式*/ .mouse - cursor - gradient - tracking { position: relative; background: #7983ff; padding: 0.5rem 1rem; font - size: 1.2rem; border: none; color: white; cursor: pointer; outline: none; overflow: hidden; } .mouse - cursor - gradient - tracking span { position: relative; } /*按钮渐变背景，这里使用伪类实现，并且使用transform动画*/ .mouse - cursor - gradient - tracking:before { --size: 0; /*渐变背景尺寸*/ content: ''; position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); /*背景渐变*/ background: radial - gradient(circle closest - side, pink, transparent); /*动画效果*/ transform: translate(-50%, -50%); transition: width 0.2s ease, height 0.2s ease; } /*鼠标经过按钮时*/ .mouse - cursor - gradient - tracking:hover:before { --size: 200px; } ``` ```javascript // 获取按钮元素 let btn = document.querySelector('.mouse - cursor - gradient - tracking'); // 绑定鼠标移动事件 btn.addEventListener('mousemove', e => { // 获取按钮的左,上,右和下分别相对浏览器视窗的位置 let rect = e.target.getBoundingClientRect(); // 计算鼠标坐标相对于按钮左、上的距离 let x = e.clientX - rect.left; let y = e.clientY - rect.top; // 更新背景渐变区域的坐标 btn.style.setProperty('--x', x + 'px'); btn.style.setProperty('--y', y + 'px'); }); ``` 点击前往免费阅读更多精彩小说