TweenMax+svg实现物流订单确认卡车发货按钮点击动画效果代码-html代码-BFW代码库

TweenMax+svg实现物流订单确认卡车发货按钮点击动画效果代码

代码语言：html

所属分类：动画

代码描述：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.........完整代码请登录后点击上方下载按钮下载查看