svg+css实现立体感十足的移动地洞动画效果代码-html代码-BFW代码库

svg+css实现立体感十足的移动地洞动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+css实现立体感十足的移动地洞动画效果代码

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

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

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

  
  
<style>
body,html{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; 
}
body{
  background-color: #E0E8EA;
  display: flex;
  justify-content: center;
  align-items: center; 
}
#cubes{
  height: 80%;
  width: 80%;
  max-height: 512px;
  max-width: 512px;
  transform:scale(1.5, 1) rotatex(45deg) rotateZ(45deg);
}
</style>

  
  
  
</head>

<body >
  <svg id="cubes" width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform:scale(1.66, 1) rotatex(45deg) rotateZ(45deg);">
<rect width="512" height="512" fill="#E0E8EA"/>

<use href="#hole" fill="url(#grad)" x="256" y="256" transform="rotate(0, 256, 256)"/>
<use href="#hole" fill="url(#grad2)" x="256" y="256" transform="rotate(90, 256, 256)"/>
<use href="#hole" fill="url(#grad3)" x="256" y="256" transform="rotate(180, 256, 256)"/>
<use href="#hole" fill="url(#grad4)" x="256" y="256" transform="rotate(270, 256, 256)"/>
<defs>
	<g id="hole">
		<path>
			<!-- BASIC SHAPE; WILL BE COPIED AND ROTATED 4 TIMES -->
			<animate attributeName="d" dur="3s" repeatCount="indefinite" calcMode="spline" 
				keyTimes="0; 0.143; 0.286; 0.429; 0.572; 0.715; 0.858; 1" 
				keySplines="0.1 0.42 0.89 0.09; 1 0.14 0.26 0.65; 0.1 0.42 0.89 0.09; 1 0.14 0.26 0.65; 0.1 0.42 0.89 0.09; 1 0.14 0.26 0.65; 0.1 0.42 0.89 0.09"
				values="M10 10 L110 10 L110 110 L10 110Z;
						M10 10 L110 10 L110 210 L10 21.........完整代码请登录后点击上方下载按钮下载查看