演示图
![图片[1]-动态 SVG 径向渐变动画-大海博客](https://www.dhme.cn/wp-content/uploads/2024/10/20240921200358311.png)
<!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>© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
暂无评论内容