--正文开始--
SVG动态渐变背景动画效果
效果预览(附原文件下载)
完整代码
<!DOCTYPE html>
<html>
<head>
<title>SVG动态渐变背景动画效果 - A5资源网</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
svg {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<!-- SVG代码开始 -->
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid slice" shape-rendering="geometricPrecision" text-rendering="optimizeLegibility"><metadata><rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#"><rdf:Description><dc:title>A5资源动态渐变背景效果</dc:title><dc:creator>A5资源网</dc:creator><dc:publisher>www.A5.org.cn</dc:publisher><dc:rights>Copyright © 2024 A5资源网. All rights reserved.</dc:rights><dc:date>2024</dc:date><dc:format>image/svg+xml</dc:format><dc:type>Image</dc:type><dc:language>zh-CN</dc:language><cc:license rdf:resource="http://creativecommons.org/licenses/by-nc-nd/4.0/"/><dc:description>这是一个带有动态渐变背景和水波纹文字效果的SVG动画。未经授权,禁止复制、修改或商业使用。</dc:description></rdf:Description></rdf:RDF></metadata><defs><radialGradient id="Gradient1" cx="50%" cy="50%" fx="0.441602%" fy="50%" r=".5"><animate attributeName="fx" dur="28s" values="0%;3%;0%" repeatCount="indefinite"/><stop offset="0%" stop-color="rgba(255,100,255,.9)"/><stop offset="50%" stop-color="rgba(255,150,255,.6)"/><stop offset="100%" stop-color="rgba(255,192,255,0)"/></radialGradient><radialGradient id="Gradient2" cx="50%" cy="50%" fx="2.68147%" fy="50%" r=".5"><animate attributeName="fx" dur="23s" values="0%;3%;0%" repeatCount="indefinite"/><stop offset="0%" stop-color="rgba(255,215,0,.9)"/><stop offset="50%" stop-color="rgba(255,230,100,.6)"/><stop offset="100%" stop-color="rgba(255,255,192,0)"/></radialGradient><radialGradient id="Gradient3" cx="50%" cy="50%" fx="0.836536%" fy="50%" r=".5"><animate attributeName="fx" dur="25s" values="0%;3%;0%" repeatCount="indefinite"/><stop offset="0%" stop-color="rgba(0,191,255,.9)"/><stop offset="50%" stop-color="rgba(135,206,250,.6)"/><stop offset="100%" stop-color="rgba(192,255,255,0)"/></radialGradient></defs><rect width="100%" height="100%" fill="#fff"/><rect x="13.744%" y="1.18473%" width="100%" height="100%" fill="url(#Gradient1)" transform="rotate(334.41 500 500)"><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 500 500" to="360 500 500" dur="15s" repeatCount="indefinite"/></rect><rect x="-2.17916%" y="35.4267%" width="100%" height="100%" fill="url(#Gradient2)" transform="rotate(255.072 500 500)"><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 500 500" to="360 500 500" dur="18s" repeatCount="indefinite"/></rect><rect x="9.00483%" y="14.5733%" width="100%" height="100%" fill="url(#Gradient3)" transform="rotate(139.903 500 500)"><animate attributeName="x" dur="25s" values="0%;25%;0%" repeatCount="indefinite"/><animate attributeName="y" dur="12s" values="0%;25%;0%" repeatCount="indefinite"/><animateTransform attributeName="transform" type="rotate" from="360 500 500" to="0 500 500" dur="20s" repeatCount="indefinite"/></rect></svg>
<!-- SVG代码结束 -->
</body>
</html>
使用说明
- 创建新的HTML文件
- 复制上述代码到文件中
- 在浏览器中打开即可看到效果
特点
- 纯SVG实现,无需JavaScript
- 流畅的动画效果
- 优美的渐变色彩
- 自适应屏幕大小
- 低资源占用
兼容性
- 支持所有现代浏览器
- 支持移动端设备
- 需要浏览器支持SVG动画
版权信息
- 网址:www.A5.org.cn
- 版权所有:© 2025 A5资源网
- 使用许可:CC BY-NC-ND 4.0
注意事项
- 未经授权,禁止商业使用
- 如需修改,请保留原作者信息
查看更多...
提高网络安全意识,养成良好上网习惯,网络下载文件先扫描杀毒。不要随意点击不明邮件中的链接、图片、文件,适当设置找回密码的提示问题。当收到与个人信息和金钱相关(如中奖、集资等)的邮件时要提高警惕。不要轻易打开陌生人发送至手机的链接和文件。在微信、QQ等程序中关闭定位功能,仅在需要时开启蓝牙。安装手机安全防护软件,经常对手机系统进行扫描。不随意连接不明Wi-Fi、刷不明二维码。保证手机随身携带,建议手机支付客户端与手机绑定,开启实名认证。从官方网站下载手机支付客户端和网上商城 应用。使用手机支付服务前,按要求在手机上安装专门用于安全防范的插件。登录手机支付应用、网上商城时,勿选择"记住密码"选项。通过网络购买商品时,仔细查看登录的网站域名是否正确,谨慎点击商家从即时通讯工具上发送的支付链接。谨慎对待手机上收到的中奖、积分兑换等信息,切勿轻易点击短信中附带的不明网址。资源收集自互联网,仅供用于学习和测试,请勿用于商业。资源如有侵权,请联系站长删除,敬请谅解!
请登录后发表评论
社交账号登录