css+svg实现无限循环loading加载动画效果代码-html代码-BFW代码库

css+svg实现无限循环loading加载动画效果代码

代码语言：html

代码描述：css+svg实现无限循环loading加载动画效果代码

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

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

<head>

  
  
  
<style>
body{
        background:#112;
}
svg{
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        height:200px;
        width: 200px;
/*      border:2px solid red; */
}
</style>


  
  
</head>

<body >
  <svg viewBox="0 0 100 100">
        <filter id="blur" x="-100%" y="-100%" width="300%" height="300%">
                <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
        </filter>
        <path id="figure8" fill="none" stroke="none" d="M 20 50 A 1 1 0 0 0 50 50 A 1 1 0 0 1 80 50 A 1 1 0 0 1 50 50 A 1 1 0 0 0 20 50" />

        <use href="#worm" filter="url(#blur)" />
        <g id="worm">
        <g opacity="0">
                <g id="c1" fill="none">
                        <circle r="8" id="circle" />
                        <animateMotion dur="5s" repeatCount="indefinite">
                                <mpath href="#figure8" />
                        </animateMotion>
                </g>
        </g>
        <use href="#circle" fill="rgba(155,255,255,0.1)">
                <animateMotio.........完整代码请登录后点击上方下载按钮下载查看