css实现弹簧伸缩推动小球运动循环动画效果代码-html代码-BFW代码库

css实现弹簧伸缩推动小球运动循环动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现弹簧伸缩推动小球运动循环动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
body {
        background-color: #f3f8ff;
}
svg {
        position: absolute;
        max-height: 120px;
        max-width: 120px;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
}
</style>


  
</head>

<body translate="no">
  <svg id="springBouceLoader" viewBox="0 0 100 100">
        <defs>
                <marker id="pad1" viewBox="0 0 10 5" refX="5" refY="5" markerWidth="20" markerHeight="10">
                        <rect x="0" y="0" height="5" width="10" rx="1" fill="tan" />
                </marker>
                <marker id="pad2" viewBox="0 0 5 10" refX="0" refY="5" markerWidth="10" markerHeight="20">
                        <rect x="0" y="0" height="10" width="5" rx="1" fill="tan" />
                </marker>
                <path id="jumpBack" d="M 20 80 h 60 c 0 -80 -60 -80 -60 0z" stroke="none" fill="none" />
        </defs>
        <path d="M1 91 h 68 m22 0 h8" stroke="silver" stroke-linecap="round" fill="none" />
        <ellipse id="c1" cx="0" cy="0" rx="10" ry="10"  fill="#e26ee5">
                <animateMotion id="a1" href="#c1" dur="3000ms" begin="0s" fill="freeze" repeatCount="indefinite">
                        <mpath href="#jumpBack" />
                </animateMotion>                
                <animate attributeName="ry" values="8; 10; 10; 10; 10; 8" dur="3s" begin="-1.75s" repeatCount="indefinite" />
                <animate attributeName="cy&qu.........完整代码请登录后点击上方下载按钮下载查看