svg+css实现旋转的液态小球动画代码

代码语言:html

所属分类:动画

代码描述:svg+css实现旋转的液态小球动画代码

代码标签: svg css 旋转 液态 小球 动画 代码

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  </head>
  <body>
<svg width="220" height="220" viewBox="0 0 720 720" xmlns="http://www.w3.org/2000/svg" style="margin:100px">
  <defs>
    <radialGradient id="pageBg" cx="50%" cy="45%" r="70%">
      <stop offset="0%" stop-color="#eefbff"/>
      <stop offset="100%" stop-color="#d7f4ff"/>
    </radialGradient>

    <radialGradient id="sphereFill" cx="35%" cy="28%" r="75%">
      <stop offset="0%" stop-color="#dff6ff"/>
      <stop offset="55%" stop-color="#b6e9ff"/>
      <stop offset="100%" stop-color="#8fdcff"/>
    </radialGradient>

    <filter id="goo" x="-180%" y="-180%" width="460%" height="460%">
      <feGaussianBlur in=&quo.........完整代码请登录后点击上方下载按钮下载查看

网友评论0