动态 SVG 径向渐变动画

0557

演示图

图片[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赞赏 分享
Fight for the things you love no matter what you may face, it will be worth it.
不管你面对的是什么，为你所爱的而奋斗都会是值得的
战东海的头像-大海博客
相关推荐
评论 抢沙发
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
表情
[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]
代码

请输入代码：

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

    暂无评论内容

默认头像
Flat rich prosperous time in vain to develop a group of coward, hardship is the mother of strong forever.
平富足的盛世徒然养成一批懦夫，困苦永远是坚强之母
直播源m3u集合 国内外直播源-IPTV URL TVBOX-大海博客
9992人已阅读
直播源m3u集合 国内外直播源-IPTV URL TVBOX
TOP1
Alist安装/升级/卸载-大海博客
Alist安装/升级/卸载
2年前2955人已阅读
TOP2
FongMi蜂蜜版电视tvbox盒子APK（持续更新）-大海博客
FongMi蜂蜜版电视tvbox盒子APK（持续更新）
1年前1631人已阅读
TOP3
影视仓完整版-大海博客
影视仓完整版
1年前1029人已阅读
TOP4
memos 使用指南：自建一个备忘录中心服务-大海博客
memos 使用指南：自建一个备忘录中心服务
2年前824人已阅读
TOP5
一为导航主题-集网址、资源、资讯于一体的WordPress导航主题-大海博客
一为导航主题-集网址、资源、资讯于一体的WordPress导航主题
2年前808人已阅读
TOP6
  • studio123的头像-大海博客
  • studio123等级-LV1-大海博客
    做最好的自己并不容易，这是很美好的愿望，需要耐心、坚持和毅力
  • zhang jian的头像-大海博客
  • zhang jian等级-LV1-大海博客
    做有用的事，说勇敢的话，想美好的事，一生足矣
  • 社区的头像-大海博客
  • 社区等级-LV1-大海博客
    无论你现在感觉如何，请起床、穿好衣服然后为你的梦想而奋斗
091202z的头像-大海博客

091202z昨天0

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

Yakito9天前0

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

shopfp16天前0

好东西，学习一下！
zhang jian的头像-大海博客

zhang jian31天前0

哪家服务器
zhang jian的头像-大海博客

zhang jian31天前0

站长，能问下用的哪家服务吗？打开很快啊
头像

66632天前0

学习一下
万乘之君的头像-大海博客

万乘之君39天前0

感谢分享
万乘之君的头像-大海博客

万乘之君40天前0

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