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" values="-4; 0; 0; 0; 0; -4" dur="3s" begin="-1.75s" repeatCount="indefinite" />
		<animate attributeName="rx" values="8; 10; 10; 10; 10; 8" dur="3s" begin="-2.75s" repeatCount="indefinite" />
		<animate attributeName="cx" values="4; 0; 0; 0; 0; 4" dur="3s" begin="-2.75s" repeatCount="indefinite" />
	</ellipse>
	<ellipse id="c2" cx="0" cy="0" rx="10" ry="10" fill="#7e30e1">
		<animateMotion id="a2" href="#c2" dur="3000ms" begin="-1s" fill="freeze" repeatCount="indefinite">
			<mpath href="#jumpBack" />
		</animateMotion>
		<animate attributeName="ry" values="8; 10; 10; 10; 10; 8" dur="3s" begin="-2.75s" repeatCount=&q.........完整代码请登录后点击上方下载按钮下载查看