TweenMax+svg实现按钮点击发货变身卡车行驶动画效果代码-html代码-BFW代码库

TweenMax+svg实现按钮点击发货变身卡车行驶动画效果代码

代码语言：html

所属分类：动画

代码描述：css布局娃娃形TweenMax+svg实现按钮点击发货变身卡车行驶动画效果代码可爱机器人效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    body {
  background: #52C1BC;
}

#ship-it {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 600px;
  overflow: visible;
}

.hidden {
  visibility: hidden;
}

.wip {
  opacity: 0.5;
}

.clickable {
  cursor: pointer;
  opacity: 0.01;
}
</style>

</head>
<body>



<svg id='ship-it' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
		<mask id='btn-mask'>
			<use fill="#FFFFFF" xlink:href="#path-1"/>
		</mask>
		<rect id="path-1" width="219" height="60" rx="8"/>
		<filter id="filter-2" width="106.8%" height="125%" x="-3.4%" y="-7.5%" filterUnits="objectBoundingBox">
			<feOffset dy="3" in="SourceAlpha" result="shadowOffsetOuter1"/>
			<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
			<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" in="shadowBlurOuter1"/>
		</filter>
	</defs>
	<g id="Page-1" fill="none" fill-rule="evenodd">
		<g id="truck">
			<g id="truck-shipping">
				<g data-anim="list">
					<path data-anim="list-bg" fill="#FFFFFF" d="M96.16 46.1h202.86v202.85H96.16z"/>
					<path id="list-label" fill="#52C1BC" d="M113.8 66.17c0-.38-.13-.67-.4-.88-.26-.22-.73-.44-1.4-.67-.66-.22-1.2-.44-1.64-.65-1.38-.68-2.07-1.6-2.07-2.8 0-.6.16-1.1.5-1.56.35-.45.84-.8 1.47-1.05s1.34-.38 2.12-.38c.76 0 1.45.13 2.05.4.6.27 1.08.66 1.42 1.17.34.5.5 1.08.5 1.73h-2.56c0-.43-.12-.77-.4-1-.25-.25-.6-.37-1.07-.37-.46 0-.82.1-1.08.3-.27.2-.4.46-.4.78 0 .28.14.53.44.75.28.22.8.45 1.53.7.74.23 1.34.48 1.82.75 1.15.67 1.73 1.58 1.73 2.75 0 .93-.35 1.67-1.06 2.2-.7.53-1.67.8-2.9.8-.86 0-1.64-.16-2.34-.47-.7-.3-1.23-.73-1.58-1.27-.35-.53-.53-1.15-.53-1.86h2.58c0 .57.14 1 .44 1.27.3.28.77.4 1.43.4.42 0 .76-.08 1-.26.25-.18.38-.44.38-.77zM128 69h-2.57v-4.45h-3.78V69h-2.57V58.34h2.57v4.23h3.78v-4.23H128V69zm12.03-5.1c0 1.03-.2 1.95-.58 2.75-.4.8-.94 1.42-1.65 1.85-.7.43-1.52.65-2.43.65-.9 0-1.7-.2-2.4-.63-.72-.42-1.26-1-1.66-1.8-.38-.77-.6-1.66-.6-2.66v-.6c0-1.05.2-1.97.57-2.77.38-.8.93-1.42 1.65-1.86.7-.43 1.53-.65 2.44-.65.9 0 1.7.2 2.42.63.7.43 1.26 1.05 1.65 1.84.4.8.6 1.7.6 2.73v.5zm-2.62-.46c0-1.06-.17-1.86-.52-2.4-.35-.56-.86-.84-1.52-.84-1.3 0-1.97.97-2.04 2.9v.8c0 1.03.16 1.84.5 2.4.36.56.87.84 1.55.84.65 0 1.15-.28 1.5-.83.36-.54.54-1.33.54-2.37v-.5zm7.9 1.94V69h-2.57V58.34H147c.8 0 1.52.15 2.15.45.63.3 1.1.7 1.46 1.27.35.55.52 1.18.52 1.88 0 1.04-.37 1.88-1.1 2.5-.76.62-1.78.93-3.08.93h-1.64zm0-1.98h1.7c.48 0 .86-.13 1.13-.38.26-.25.4-.6.4-1.05 0-.5-.15-.9-.42-1.2-.25-.3-.62-.44-1.08-.45h-1.72v3.08zm11.15 1.98V69h-2.58V58.34h4.26c.82 0 1.54.15 2.16.45.62.3 1.1.7 1.45 1.27.35.55.52 1.18.52 1.88 0 1.04-.37 1.88-1.12 2.5-.74.62-1.77.93-3.06.93h-1.65zm0-1.98h1.68c.5 0 .88-.13 1.........完整代码请登录后点击上方下载按钮下载查看