js+svg实现一个曲线生长动画效果代码-html代码-BFW代码库

js+svg实现一个曲线生长动画效果代码

代码语言：html

所属分类：动画

代码描述：js+svg实现一个曲线生长动画效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
        background: hsla(220,50%,90%,.5);
}
</style>



</head>

<body >
  <svg id="svg" width="100%" height="100%" viewbox="100 0 600 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
        <g id="lines">
                <path d="" stroke="hsla(0, 10%, 50%, .4)" stroke-width=".1" id="trace" fill="none" />
        </g>
        
        <path d="m 300 200 c 310 310 -120 120 -30 -30" id="animated" fill="none">
                <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 360 200" to="360 360 200" dur="10s" repeatCount="indefinite" id="rotate"></animateTransform>
        </path>
        
        <path d="m 300 200 c 310 310 -120 120 -30 -30" id="animated2" fill="none">
                <animateTransform attributeName="transform" attributeType="XML" type="rotate" to="0 360 200" from="360 360 200" dur="12s" repeatCount="indefinite" id="rotate"></animateTrans.........完整代码请登录后点击上方下载按钮下载查看