血透系统PC前端

balls.svg 1.6KB

123456789101112131415161718192021
  1. <svg width='120px' height='120px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-balls"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><g transform="rotate(0 50 50)">
  2. <circle r="5" cx="30" cy="50">
  3. <animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur="1s" values="0 0;19.999999999999996 -20" keyTimes="0;1"/>
  4. <animate attributeName="fill" dur="1s" begin="0s" repeatCount="indefinite" keyTimes="0;1" values="#fff;#999"/>
  5. </circle>
  6. </g><g transform="rotate(90 50 50)">
  7. <circle r="5" cx="30" cy="50">
  8. <animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur="1s" values="0 0;19.999999999999996 -20" keyTimes="0;1"/>
  9. <animate attributeName="fill" dur="1s" begin="0s" repeatCount="indefinite" keyTimes="0;1" values="#999;#000"/>
  10. </circle>
  11. </g><g transform="rotate(180 50 50)">
  12. <circle r="5" cx="30" cy="50">
  13. <animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur="1s" values="0 0;19.999999999999996 -20" keyTimes="0;1"/>
  14. <animate attributeName="fill" dur="1s" begin="0s" repeatCount="indefinite" keyTimes="0;1" values="#000;#fff"/>
  15. </circle>
  16. </g><g transform="rotate(270 50 50)">
  17. <circle r="5" cx="30" cy="50">
  18. <animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur="1s" values="0 0;19.999999999999996 -20" keyTimes="0;1"/>
  19. <animate attributeName="fill" dur="1s" begin="0s" repeatCount="indefinite" keyTimes="0;1" values="#fff;#999"/>
  20. </circle>
  21. </g></svg>