云彩背景动画

下载代码

html

css

js

分享到微信朋友圈

X

html

<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>
<h1>
  Clouds<br /> of  ther.
</h1>

css

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg

<!doctype html> <html> <head> <meta charset="utf-8"> <title>云彩背景动画-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号