TweenMax+svg实现物流订单确认卡车发货按钮点击动画效果代码
代码语言：html
所属分类：动画
代码描述：TweenMax+svg实现物流订单确认卡车发货按钮点击动画效果代码
代码标签： 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: .5
}
.clickable {
cursor: pointer;
opacity: .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.14-.38.26-.25.4-.6.4-1.05 0-.5-.14-.9-.4-1.2-.28-.3-.65-.44-1.1-.45h-1.72v3.08zm11.3 5.6h-2.56V58.34h2.56V69zm12.08 0h-2.56l-3.78-6.64V69h-2.58V58.34h2.57l3.77 6.63v-6.63h2.56V69zm11.74-1.32c-.4.44-.98.8-1.74 1.06-.76.27-1.6.4-2.5.4-1.4 0-2.52-.42-3.35-1.28-.84-.85-1.28-2.04-1.34-3.56v-.92c0-1.05.18-1.97.55-2.76.36-.78.9-1.38 1.58-1.8.7-.43 1.5-.64 2.4-.64 1.33 0 2.36.3 3.1.9.73.62 1.16 1.53 1.28 2.73h-2.48c-.08-.58-.27-1-.57-1.26-.28-.25-.7-.38-1.23-.38-.65 0-1.15.27-1.5.82-.35.55-.53 1.33-.53 2.34v.65c0 1.06.18 1.86.54 2.4.37.53.94.8 1.72.8.67 0 1.17-.15 1.5-.45v-1.65h-1.8V63.3h4.37v4.38zm10.56-.66h4.47V69h-7.04V58.34h2.57v8.68zM211.8 69h-2.56V58.34h2.57V69zm8.67-2.83c0-.38-.13-.67-.4-.88-.26-.22-.73-.44-1.4-.67-.67-.22-1.2-.44-1.64-.65-1.38-.68-2.07-1.6-2.07-2.8 0-.6.17-1.1.5-1.56.36-.45.85-.8 1.48-1.05s1.33-.38 2.12-.38c.77 0 1.45.13 2.06.4.6.27 1.08.66 1.42 1.17.34.5.5 1.08.5 1.73h-2.56c0-.43-.13-.77-.4-1-.26-.25-.63-.37-1.08-.37-.46 0-.82.1-1.1.3-.25.2-.4.46-.4.78 0 .28.16.53.45.75.3.22.8.45 1.55.7.74.23 1.34.48 1.82.75 1.15.67 1.72 1.58 1.72 2.75 0 .93-.35 1.67-1.05 2.2-.7.53-1.68.8-2.9.8-.87 0-1.65-.16-2.35-.47-.7-.3-1.23-.73-1.58-1.27-.36-.53-.53-1.15-.53-1.86h2.57c0 .57.16 1 .46 1.27.3.28.77.4 1.44.4.42 0 .76-.08 1-.26.25-.18.37-.44.37-.77zm13.64-5.85h-3.2V69h-2.56v-8.68h-3.14v-1.98h8.9v1.98z"/>
<g data-anim="list-item">
<g transform="translate(104.59 193.5)">
<rect id="bg" width="185" height="46" x=".7" y=".63" fill="#F4F6F8" rx="8"/>
<g id="carrot">
<path id="Combined-Shape" fill="#52C1BC" d="M21.98 22.33c.75.5 1.26.78 1.26.78l.66-1.3-1.87-1.4s.6-2.03-.28-3.36c-.9-1.32-1.92-.96-3.23-1.1.66-1.48-1.5-2.24-1.5-2.24s.76-2.8-1.52-2.57c-2.28.23-.87 4.8 1.45 7.24.87.92 1.97 1.8 3 2.58-1.23.1-2.62.26-3.82.57-3.02.8-5.74 5.4-4.06 6.7 2.2 1.67 2.33-2.1 2.33-2.1s3.3 1.4 3.3-1.5c.85.43 1.3.62 2.65 0 1.35-.62.77-2.2.77-2.2l.86-.1z"/>
<path id="Combined-Shape" fill="#FFC14C" d="M36.8 25.58c-.74-.64-1.63-1.44-2.72-2.43-.63 1.43-1.62 2.9-1.62 2.9-.12.2-.36.25-.56.15-.2-.1-.23-.32-.1-.5 0 0 .87-.92 1.67-3.1-.5-.48-1.07-.98-1.66-1.53-.35-.33-.7-.62-1.03-.88-.14.64-.34 1.38-.6 2-.68 1.56-2.23 3.5-2.23 3.5-.14.17-.4.2-.57.1-.2-.12-.2-.34-.06-.5 0 0 1.1-.98 2.15-3.43.36-.84.6-1.55.73-2.12-3.9-2.75-5.17.12-7.1 2.63-2.2 2.82-1.08 6.4 4.75 9.38 5.83 2.96 12.55.24 13.8-.7 1.23-.94-.83-2.5-1.8-3.05-.48-.27-1.2-.82-2.5-1.94-.48.88-.94 1.57-.94 1.57-.13.18-.38.24-.57.14-.2-.1-.23-.32-.1-.5 0 0 .48-.5 1.06-1.7z"/>
</g>
<g id="item-info" stroke="#989BAF" stroke-linecap="round" stroke-linejoin="round">
<path id="Path-4" d="M54.43 32.4s7.25-.28 18.28-.2c11.04.07 17.18.38 20.3.47 3.1.1 4.9.53 16.5 0 11.58-.52 6.46-.67 11.88-.73 5.42-.07 9.2.34 13.3.42l11.54-.4"/>
<path id="Path-2" d="M54.44 23.26s2.98 1.62 6.8-.88c3.84-2.5 7.67-8.7 5.58-8.7-2.54 0-3 3.38-3 3.38s-.98 5.9 2.6 6.25c8.43.82 9.16-8.74 12.9-7.7 3.7 1.06-1.47 5.78 1.8 7.1 3.25 1.33 5.87-5.45 8.4-5.2 2.53.23-.1 2.96 2.15 3.43 2.25.47 2.72-1.9 4.85-1.53 2.14.37-.54 2.34 2.77 1.94 3.3-.4 8.26-1.65 8.26-1.65"/>
</g>
</g>
</g>
<g data-anim="list-item">
<g transform="translate(104.59 143.5)">
<rect id="bg" width="185" height="46" x=".7" y=".63" fill="#F4F6F8" rx="8"/>
<g id="carrot">
<path id="Combined-Shape" fill="#52C1BC" d="M21.98 22.33c.75.5 1.26.78 1.26.78l.66-1.3-1.87-1.4s.6-2.03-.28-3.36c-.9-1.32-1.92-.96-3.23-1.1.66-1.48-1.5-2.24-1.5-2.24s.76-2.8-1.52-2.57c-2.28.23-.87 4.8 1.45 7.24.87.92 1.97 1.8 3 2.58-1.23.1-2.62.26-3.82.57-3.02.8-5.74 5.4-4.06 6.7 2.2 1.67 2.33-2.1 2.33-2.1s3.3 1.4 3.3-1.5c.85.43 1.3.62 2.65 0 1.35-.62.77-2.2.77-2.2l.86-.1z"/>
<path id="Combined-Shape" fill="#FFC14C" d="M36.8 25.58c-.74-.64-1.63-1.44-2.72-2.43-.63 1.43-1.62 2.9-1.62 2.9-.12.2-.36.25-.56.15-.2-.1-.23-.32-.1-.5 0 0 .87-.92 1.67-3.1-.5-.48-1.07-.98-1.66-1.53-.35-.33-.7-.62-1.03-.88-.14.64-.34 1.38-.6 2-.68 1.56-2.23 3.5-2.23 3.5-.14.17-.4.2-.57.1-.2-.12-.2-.34-.06-.5 0 0 1.1-.98 2.15-3.43.36-.84.6-1.55.73-2.12-3.9-2.75-5.17.12-7.1 2.63-2.2 2.82-1.08 6.4 4.75 9.38 5.83 2.96 12.55.24 13.8-.7 1.23-.94-.83-2.5-1.8-3.05-.48-.27-1.2-.82-2.5-1.94-.48.88-.94 1.57-.94 1.57-.13.18-.38.24-.57.14-.2-.1-.23-.32-.1-.5 0 0 .48-.5 1.06-1.7z"/>
</g>
<g id="item-info" stroke="#989BAF" stroke-linecap="round" stroke-linejoin="round">
<path id="Path-4" d="M54.43 32.4s7.25-.28 18.28-.2c11.04.07 17.18.38 20.3.47 3.1.1 4.9.53 16.5 0 11.58-.52 6.46-.67 11.88-.73 5.42-.07 9.2.34 13.3.42l11.54-.4"/>
<path id="Path-2" d="M54.44 23.26s2.98 1.62 6.8-.88c3.84-2.5 7.67-8.7 5.58-8.7-2.54 0-3 3.38-3 3.38s-.98 5.9 2.6 6.25c8.43.82 9.16-8.74 12.9-7.7 3.7 1.06-1.47 5.78 1.8 7.1 3.25 1.33 5.87-5.45 8.4-5.2 2.53.23-.1 2.96 2.15 3.43 2.25.47 2.72-1.9 4.85-1.53 2.14.37-.54 2.34 2.77 1.94 3.3-.4 8.26-1.65 8.26-1.65"/>
</g>
</g>
</g>
<g data-anim="list-item">
<g transform="translate(104.59 93.5)">
<rect id="bg" width="185" height="46" x=".7" y=".63" fill="#F4F6F8" rx="8"/>
<g id="carrot">
<path id="Combined-Shape" fill="#52C1BC" d="M21.98 22.33c.75.5 1.26.78 1.26.78l.66-1.3-1.87-1.4s.6-2.03-.28-3.36c-.9-1.32-1.92-.96-3.23-1.1.66-1.48-1.5-2.24-1.5-2.24s.76-2.8-1.52-2.57c-2.28.23-.87 4.8 1.45 7.24.87.92 1.97 1.8 3 2.58-1.23.1-2.62.26-3.82.57-3.02.8-5.74 5.4-4.06 6.7 2.2 1.67 2.33-2.1 2.33-2.1s3.3 1.4 3.3-1.5c.85.43 1.3.62 2.65 0 1.35-.62.77-2.2.77-2.2l.86-.1z"/>
<path id="Combined-Shape" fill="#FFC14C" d="M36.8 25.58c-.74-.64-1.63-1.44-2.72-2.43-.63 1.43-1.62 2.9-1.62 2.9-.12.2-.36.25-.56.15-.2-.1-.23-.32-.1-.5 0 0 .87-.92 1.67-3.1-.5-.48-1.07-.98-1.66-1.53-.35-.33-.7-.62-1.03-.88-.14.64-.34 1.38-.6 2-.68 1.56-2.23 3.5-2.23 3.5-.14.17-.4.2-.57.1-.2-.12-.2-.34-.06-.5 0 0 1.1-.98 2.15-3.43.36-.84.6-1.55.73-2.12-3.9-2.75-5.17.12-7.1 2.63-2.2 2.82-1.08 6.4 4.75 9.38 5.83 2.96 12.55.24 13.8-.7 1.23-.94-.83-2.5-1.8-3.05-.48-.27-1.2-.82-2.5-1.94-.48.88-.94 1.57-.94 1.57-.13.18-.38.24-.57.14-.2-.1-.23-.32-.1-.5 0 0 .48-.5 1.06-1.7z"/>
</g>
<g id="item-info" stroke="#989BAF" stroke-linecap="round" stroke-linejoin="round">
<path id="Path-4" d="M54.43 32.4s7.25-.28 18.28-.2c11.04.07 17.18.38 20.3.47 3.1.1 4.9.53 16.5 0 11.58-.52 6.46-.67 11.88-.73 5.42-.07 9.2.34 13.3.42l11.54-.4"/>
<path id="Path-2" d="M54.44 23.26s2.98 1.62 6.8-.88c3.84-2.5 7.67-8.7 5.58-8.7-2.54 0-3 3.38-3 3.38s-.98 5.9 2.6 6.25c8.43.82 9.16-8.74 12.9-7.7 3.7 1.06-1.47 5.78 1.8 7.1 3.25 1.33 5.87-5.45 8.4-5.2 2.53.23-.1 2.96 2.15 3.43 2.25.47 2.72-1.9 4.85-1.53 2.14.37-.54 2.34 2.77 1.94 3.3-.4 8.26-1.65 8.26-1.65"/>
</g>
</g>
</g>
</g>
<g data-anim="btn-shipped" transform="translate(93.09 271.165)" class='hidden'>
<rect id="btn-fill" width="205.88" height="56.4" x="1.56" y="1.8" fill="#4EB7B2" rx="8"/>
<path id="btn-dash" fill="#44A29E" fill-r.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0