【练习篇】动态 SVG 径向渐变动画
前言：
前段时间看到这种动态SVG渐变效果看上去很舒服，今天抽出来时间试了一下，看着还不错。文章中没有放GIF图片，试了一下太掉帧了，直接放了静态图片了，想看效果的自己建一个index.html试一下就行。
话不多说直接上图和代码
演示图：
一个简单的HTML页面代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>漫川演示页面</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
svg {
width: 100%;
height: 100%;
position: absolute; z-index: -1;
}
@media (max-width: 768px) {
svg {
width: 100vw;
height: 100vh;
position: absolute; z-index: -1;
}
}
/* 添加磨砂效果 */
svg::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
}
</style>
</head>
<body>
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
<defs>
<radialGradient id="Gradient1" cx="50%" cy="50%" fx="10%" fy="50%" r=".5">
<animate attributeName="fx" dur="34s" values="0%;3%;0%" repeatCount="indefinite" />
<stop offset="0%" stop-color="#ff0" />
<stop offset="100%" stop-color="#ff00" />
</radialGradient>
<radialGradient id="Gradient2" cx="50%" cy="50%" fx="10%" fy="50%" r=".5">
<animate attributeName="fx" dur="23.5s" values="0%;3%;0%" repeatCount="indefinite" />
<stop offset="0%" stop-color="#0ff" />
<stop offset="100%" stop-color="#0ff0" />
</radialGradient>
<radialGradient id="Gradient3" cx="50%" cy="50%" fx="50%" fy="50%" r=".5">
<animate attributeName="fx" dur="21.5s" values="0%;3%;0%" repeatCount="indefinite" />
<stop offset="0%" stop-color="#f0f" />
<stop offset="100%" stop-color="#f0f0" />
</radialGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient1)">
<animate attributeName="x" dur="20s" values="25%;0%;25%" repeatCount="indefinite" />
<animate attributeName="y" dur="21s" values="0%;25%;0%" repeatCount="indefinite" />
<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="17s" repeatCount="indefinite" />
</rect>
<rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient2)">
<animate attributeName="x" dur="23s" values="-25%;0%;-25%" repeatCount="indefinite" />
<animate attributeName="y" dur="24s" values="0%;50%;0%" repeatCount="indefinite" />
<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="18s" repeatCount="indefinite" />
</rect>
<rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient3)">
<animate attributeName="x" dur="25s" values="0%;25%;0%" repeatCount="indefinite" />
<animate attributeName="y" dur="26s" values="0%;25%;0%" repeatCount="indefinite" />
<animateTransform attributeName="transform" type="rotate" from="360 50 50" to="0 50 50" dur="19s" repeatCount="indefinite" />
</rect>
</svg>
<div class="child"></div>
</body>
</html>代码二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" />
<title>漫川动态 SVG 渐变演示</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
svg {
width: 100%;
height: 100%;
}
@media (max-width: 768px) {
svg {
width: 100vw;
height: 100vh;
}
}
/* 添加磨砂效果 */
svg::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
}
</style>
</head>
<body>
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
<defs>
<radialGradient id="Gradient1" cx="50%" cy="50%" fx="50%" fy="50%" r=".5">
<animate attributeName="fx" dur="34s" values="0%;1%;0%" repeatCount="indefinite"></animate>
<stop offset="0%" stop-color="rgba(255, 0, 255, 1)"></stop>
<stop offset="100%" stop-color="rgba(255, 0, 255, 0)"></stop>
</radialGradient>
<radialGradient id="Gradient2" cx="50%" cy="50%" fx="10%" fy="50%" r=".5">
<animate attributeName="fx" dur="23.5s" values="0%;1%;0%" repeatCount="indefinite"></animate>
<stop offset="0%" stop-color="rgba(255, 255, 0, 1)"></stop>
<stop offset="100%" stop-color="rgba(255, 255, 0, 0)"></stop>
</radialGradient>
<radialGradient id="Gradient3" cx="50%" cy="50%" fx="50%" fy="50%" r=".5">
<animate attributeName="fx" dur="21.5s" values="0%;1%;0%" repeatCount="indefinite"></animate>
<stop offset="0%" stop-color="rgba(0, 255, 255, 1)"></stop>
<stop offset="100%" stop-color="rgba(0, 255, 255, 0)"></stop>
</radialGradient>
<radialGradient id="Gradient4" cx="50%" cy="50%" fx="50%" fy="50%" r=".5">
<animate attributeName="fx" dur="23s" values="0%;5%;0%" repeatCount="indefinite"></animate>
<stop offset="0%" stop-color="rgba(0, 255, 0, 1)"></stop>
<stop offset="100%" stop-color="rgba(0, 255, 0, 0)"></stop>
</radialGradient>
<radialGradient id="Gradient5" cx="50%" cy="50%" fx="10%" fy="50%" r=".5">
<animate attributeName="fx" dur="24.5s" values="0%;5%;0%" repeatCount="indefinite"></animate>
<stop offset="0%" stop-color="rgba(0,0,255, 1)"></stop>
<stop offset="100%" stop-color="rgba(0,0,255, 0)"></stop>
</radialGradient>
<radialGradient id="Gradient6" cx="50%" cy="50%" fx="50%" fy="50%" r=".5">
<animate attributeName="fx" dur="25.5s" values="0%;5%;0%" repeatCount="indefinite"></animate>
<stop offset="0%" stop-color="rgba(255,0,0, 1)"></stop>
<stop offset="100%" stop-color="rgba(255,0,0, 0)"></stop>
</radialGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient4)">
<animate attributeName="x" dur="20s" values="25%;0%;25%" repeatCount="indefinite" />
<animate attributeName="y" dur="21s" values="0%;25%;0%" repeatCount="indefinite" />
<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="17s" repeatCount="indefinite"/>
</rect>
<rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient5)">
<animate attributeName="x" dur="23s" values="0%;-25%;0%" repeatCount="indefinite" />
<animate attributeName="y" dur="24s" values="25%;-25%;25%" repeatCount="indefinite" />
<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="18s" repeatCount="indefinite"/>
</rect>
<rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient6)">
<animate attributeName="x" dur="25s" values="-25%;0%;-25%" repeatCount="indefinite" />
<animate attributeName="y" dur="26s" values="0%;-25%;0%" repeatCount="indefinite" />
<animateTransform attributeName="transform" type="rotate" from="360 50 50" to="0 50 50" dur="19s" repeatCount="indefinite"/>
</rect>
<rect x="0" y="0" width="200%" height="200%" fill="url(#Gradient1)">
<animate attributeName="x" dur="20s" values="0%;50%;0%" repeatCount="indefinite"></animate>
<animate attributeName="y" dur="21s" values="0%;50%;0%" repeatCount="indefinite"></animate>
<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="17s" repeatCount="indefinite"></animateTransform>
</rect>
<rect x="0" y="0" width="100%" height="200%" fill="url(#Gradient2)">
<animate attributeName="x" dur="23s" values="50%;-25%;50%" repeatCount="indefinite"></animate>
<animate attributeName="y" dur="24s" values="50%;-25%;50%" repeatCount="indefinite"></animate>
<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="18s" repeatCount="indefinite"></animateTransform>
</rect>
<rect x="0" y="0" width="100%" height="200%" fill="url(#Gradient3)">
<animate attributeName="x" dur="25s" values="0%;75%;0%" repeatCount="indefinite"></animate>
<animate attributeName="y" dur="26s" values="0%;25%;0%" repeatCount="indefinite"></animate>
<animateTransform attributeName="transform" type="rotate" from="360 50 50" to="0 50 50" dur="19s" repeatCount="indefinite"></animateTransform>
</rect>
</svg>
<div class="child"></div>
</body>
</html>主要部分解析：
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">：创建一个 SVG 图形区域，viewBox属性定义了视口的坐标范围，preserveAspectRatio属性用于控制如何保持图形的宽高比。<defs>：用于定义可重复使用的元素，如渐变。<radialGradient id="Gradient1" cx="50%" cy="50%" fx="10%" fy="50%" r=".5">到<radialGradient id="Gradient3"...>：定义了三个径向渐变，cx和cy定义了中心点的位置，fx和fy可能影响渐变的焦点位置，r定义了渐变的半径。每个渐变内部的<animate>元素用于动态改变fx属性的值，实现渐变焦点的动态变化。<stop>元素定义了渐变的颜色停止点和颜色值。
<rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient1)">到<rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient3)">：创建了三个矩形。x和y定义了矩形的起始位置，width和height定义了矩形的大小。fill属性使用前面定义的渐变来填充矩形。- 每个矩形内部的
<animate>元素用于动态改变矩形的x和y位置以及旋转角度，从而实现矩形的动态移动和旋转效果。
- 每个矩形内部的
总的来说，这段代码通过定义径向渐变和对矩形的属性进行动画设置，创建了一个具有动态效果的 SVG 图形。
别管，这段解析是Ai生成的。
发布于 2024 年 8 月 14 日，本篇文章阅读 96 次