--正文开始--

SVG动态渐变背景动画效果

这是一个使用SVG制作的动态渐变背景动画效果,具有流畅的动画过渡和优美的色彩变化。

效果预览(附原文件下载

38f872e4f920250112142547

17ba770bba20250112142612

完整代码

<!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动画

版权信息

  • 使用许可:CC BY-NC-ND 4.0

注意事项

  • 未经授权,禁止商业使用

  • 如需修改,请保留原作者信息
————————————————————————————————————————————–
原文件下载预览:https://a5.org.cn/wp-content/a5ziyuan_img/img_ad/dt/a5zydtbj1.svg
                             https://a5.org.cn/wp-content/a5ziyuan_img/img_ad/dt/a5zydtbj2.svg

查看更多... 提高网络安全意识,养成良好上网习惯,网络下载文件先扫描杀毒。不要随意点击不明邮件中的链接、图片、文件,适当设置找回密码的提示问题。当收到与个人信息和金钱相关(如中奖、集资等)的邮件时要提高警惕。不要轻易打开陌生人发送至手机的链接和文件。在微信、QQ等程序中关闭定位功能,仅在需要时开启蓝牙。安装手机安全防护软件,经常对手机系统进行扫描。不随意连接不明Wi-Fi、刷不明二维码。保证手机随身携带,建议手机支付客户端与手机绑定,开启实名认证。从官方网站下载手机支付客户端和网上商城 应用。使用手机支付服务前,按要求在手机上安装专门用于安全防范的插件。登录手机支付应用、网上商城时,勿选择"记住密码"选项。通过网络购买商品时,仔细查看登录的网站域名是否正确,谨慎点击商家从即时通讯工具上发送的支付链接。谨慎对待手机上收到的中奖、积分兑换等信息,切勿轻易点击短信中附带的不明网址。资源收集自互联网,仅供用于学习和测试,请勿用于商业。资源如有侵权,请联系站长删除,敬请谅解!

正文结束:原文
评论 抢沙发

请登录后发表评论

    请登录后查看评论内容