动态 SVG 径向渐变动画

0707

演示图

图片[1]-动态 SVG 径向渐变动画-大海博客
<!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">
  <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">
  <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
程序源码
# HTML
喜欢就支持一下吧
点赞7赞赏 分享
I am ordinary yet unique.
我很平凡，但我独一无二
战东海的头像-大海博客
相关推荐
评论 抢沙发
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
表情
[aoman][baiyan][bishi][bizui][cahan][ciya][dabing][daku][deyi][doge][fadai][fanu][fendou][ganga][guzhang][haixiu][hanxiao][zuohengheng][zhuakuang][zhouma][zhemo][zhayanjian][zaijian][yun][youhengheng][yiwen][yinxian][xu][xieyanxiao][xiaoku][xiaojiujie][xia][wunai][wozuimei][weixiao][weiqu][tuosai][tu][touxiao][tiaopi][shui][se][saorao][qiudale][qinqin][qiaoda][piezui][penxue][nanguo][liulei][liuhan][lenghan][leiben][kun][kuaikule][ku][koubi][kelian][keai][jingya][jingxi][jingkong][jie][huaixiao][haqian][aini][OK][qiang][quantou][shengli][woshou][gouyin][baoquan][aixin][bangbangtang][xiaoyanger][xigua][hexie][pijiu][lanqiu][juhua][hecai][haobang][caidao][baojin][chi][dan][kulou][shuai][shouqiang][yangtuo][youling]
代码

请输入代码：

确认
图片
快捷回复
谢谢你的分享，我从中学到了很多！
教程很好用，谢谢！
好东西，学习一下！
楼主听话，快到碗里来！
路过一下，我只是来打酱油的！
水帖美如花，养护靠大家！

    暂无评论内容

默认头像
We’d better struggle for the future rather than regret for the past.
如果后悔过去，不如奋斗将来
直播源m3u集合 国内外直播源-IPTV URL TVBOX-大海博客
1W+人已阅读
直播源m3u集合 国内外直播源-IPTV URL TVBOX
TOP1
Alist安装/升级/卸载-大海博客
Alist安装/升级/卸载
2年前3198人已阅读
TOP2
FongMi蜂蜜版电视tvbox盒子APK（持续更新）-大海博客
FongMi蜂蜜版电视tvbox盒子APK（持续更新）
1年前1776人已阅读
TOP3
影视仓完整版-大海博客
影视仓完整版
1年前1102人已阅读
TOP4
一为导航主题-集网址、资源、资讯于一体的WordPress导航主题-大海博客
一为导航主题-集网址、资源、资讯于一体的WordPress导航主题
2年前907人已阅读
TOP5
memos 使用指南：自建一个备忘录中心服务-大海博客
memos 使用指南：自建一个备忘录中心服务
2年前861人已阅读
TOP6
  • popgo的头像-大海博客
  • popgo等级-LV1-大海博客
    可以接受暂时的失败，但绝对不能接受未曾奋斗过的自己
  • qw2114805的头像-大海博客
  • qw2114805等级-LV1-大海博客
    这个宇宙中只有一个角落你肯定可以改进，那就是你自己
  • 091202z的头像-大海博客
  • 091202z等级-LV1-大海博客
    有时候，一点微不足道的肯定，对我却意义非凡
  • Aa3466563350的头像-大海博客
  • Aa3466563350等级-LV1-大海博客
    上天只会安排的快乐的结局。如果不快乐，说明还不是最后结局
281514lz的头像-大海博客

281514lz20天前0

水帖美如花，养护靠大家！
头像

dah1个月前0

楼主听话，快到碗里来！
popgo的头像-大海博客

popgo1个月前0

666,下来看看。谢谢
头像

shopfp1个月前0

教程很好用，谢谢！
qw2114805的头像-大海博客

qw21148051个月前0

水帖美如花，养护靠大家！
091202z的头像-大海博客

091202z2个月前0

水帖美如花，养护靠大家！
头像

Yakito2个月前0

谢谢你的分享，我从中学到了很多！
头像

shopfp2个月前0

好东西，学习一下！
标签云
音乐 (1)青龙面板 (1)随机点名系统 (1)随机抽取系统 (1)阿里堆友 (1)豆瓣插件 (1)豆瓣 (1)说说 (1)设计 (1)解析源码 (1)视频源码 (2)视频 (2)荣誉墙 (1)苹果主题 (4)苹果cms主题 (1)苹果cms (3)聚合登入插件 (1)聊天源码 (1)美化 (7)缩略图美化 (1)