svg+TweenMax实现吊机开动动画效果代码

代码语言:html

所属分类:动画

代码描述:svg+TweenMax实现吊机开动动画效果代码

代码标签: svg TweenMax 吊机

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


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

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
html,
body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #ebf4fd;
}

svg {
  width: 160px;
  height: 160px;
  overflow: hidden;
}
svg path {
  fill: #1d1b84;
}
</style>


</head>

<body>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 111.27 107.59">
	<path class="cls-1" d="M33.74,92a8,8,0,1,0,0,16H89a8,8,0,1,0,0-16H33.74ZM89,111.65H33.74a11.59,11.59,0,1,1,0-23.17H89a11.59,11.59,0,1,1,0,23.17h0Z" transform="translate(-4.37 -4.71)" />
	<path class="cls-1" d="M35.52,97.39a2.67,2.67,0,1,0,2.67,2.67,2.68,2.68,0,0,0-2.67-2.67m0,8.91a6.24,6.24,0,1,1,6.24-6.24,6.24,6.24,0,0,1-6.24,6.24" transform="translate(-4.37 -4.71)" />
	<path class="cls-1" d="M87.21,97.39a2.67,2.67,0,1,0,2.67,2.67,2.68,2.68,0,0,0-2.67-2.67m0,8.91a6.24,6.24,0,1,1,6.24-6.24,6.24,6.24,0,0,1-6.24,6.24" transform="translate(-4.37 -4.71)" />
	<path class="cls-1" d="M41.15,102.73H81.58a6.2,6.2,0,0,1,0-5.35H41.15a6.2,6.2,0,0,1,0,5.35h0Zm-4.74,1.69h0Zm49.91,1.87H36.41a1.78,1.78,0,0,1-1.78-1.78,1.88,1.88,0,0,1,1.43-1.84,2.67,2.67,0,0,0,0-5.24,1.78,1.78,0,0,1-1.43-1.75,1.86,1.86,0,0,1,1.78-1.87H86.32a1.78,1.78,0,0,1,1.78,1.78,1.88,1.88,0,0,1-1.43,1.84,2.67,2.67,0,0,0,0,5.24,1.78,1.78,0,0,1,1.43,1.75,1.86,1.86,0,0,1-1.78,1.87h0Z" transform="translate(-4.37 -4.71)" />
	<g class="excavator-body">
		<path class="cls-1" d="M54.24,88.48H68.5V86.69H54.24v1.78Zm16,3.56H52.46a1.78,1.78,0,0,1-1.78-1.78V84.91a1.78,1.78,0,0,1,1.78-1.78H70.28a1.78,1.78,0,0,1,1.78,1.78v5.35A1.78,1.78,0,0,1,70.28,92h0Z" transform="translate(-4.37 -4.71)" />
		<path class="cls-1" d="M25.72,83.13H75.63V63.87a9.26,9.26,0,0,0-9.25-9.25H52.46a1.79,1.79,0,0,0-1.79,1.79V70.65a1.78,1.78,0,0,1-1.78,1.78H29.43a3.71,3.71,0,0,0-3.71,3.71v7Zm51.69,3.57H23.94a1.78,1.78,0,0,1-1.78-1.78V76.14a7.28,7.28,0,0,1,7.27-7.27H47.11V56.4A5.36,5.36,0,0,1,52.46,51H66.37A12.82,12.82,0,0,1,79.19,63.87v21a1.78,1.78,0,0,1-1.78,1.78h0Z" transform="translate(-4.37 -4.71)" />
		<path class="cls-1" d="M25.72,76h7.07a3.63,3.63,0,0,0,3.62-3.56h-7A3.71,3.71,0,0,0,25.72,76m7.07,3.56H23.94a1.78,1.78,0,0,1-1.78-1.78V76.14a7.28,7.28,0,0,1,7.27-7.27H38.2A1.78,1.78,0,0,1,40,70.65v1.73a7.19,7.19,0,0,1-7.18,7.18" transform="translate(-4.37 -4.71)" />
		<path class="cls-1" d="M59.58,54.61v11a5.48,5.48,0,0,0,3.6,5.14l12.44,4.53V63.87a9.35,9.35,0,0,0-4.11-7.71,9.57,9.57,0,0,0-5.43-1.55h-6.5Zm17.82,25a.........完整代码请登录后点击上方下载按钮下载查看

网友评论0