Great radial-gradientcolor background animation

Answer 1

以下是一些使用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');
});
```
点击前往免费阅读更多精彩小说