gsap实现一个购买衣服下订单开炮弹射动画效果代码
代码语言:html
所属分类:动画
代码描述:gsap实现一个购买衣服下订单开炮弹射动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } body { min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } :root { --color: hsl(var(--hue), 80%, 60%); } .t-shirt { height: 100%; width: 100%; position: absolute; top: 0; left: 0; } .t-shirt__shirt { fill: var(--color); } .t-shirt__wrapper { position: relative; } .t-shirt__cannon { position: absolute; left: 50%; top: 50%; width: 10px; transform: translate(-50%, 0); } .t-shirt__cannon svg { position: absolute; top: 0; left: 0; } .cannon__shirt path { fill: var(--color); } .cannon__band { fill: #ffd500; } .cannon__plastic { fill: rgba(163,231,245,0.35); } .cannon__shine { fill: rgba(255,255,255,0.5); } .button { font-family: sans-serif; font-weight: bold; font-size: 1rem; padding: 1rem 2rem; padding-left: calc(1rem + 50px); position: relative; border-radius: 6px; border: 0; color: #fff; outline: transparent; min-width: 120px; -webkit-clip-path: inset(-1000% -1000% 0 0); clip-path: inset(-1000% -1000% 0 0); } .button__text { position: relative; } .button__text .dummy { color: transparent; } .button__text > .text { position: absolute; top: 0; left: 0; white-space: nowrap; } .button .word { display: inline-block; -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } .button .char { display: inline-block; } .button__shirt { position: absolute; height: 32px; width: 32px; top: 50%; left: calc(0.5rem + 25px); transform: translate(-50%, -50%); } .t-shirt__container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; border-radius: 6px; } button { --hue: 260; cursor: pointer; background: transparent; padding: 0; border: 0; border-radius: 6px; outline: transparent; background: hsl(var(--hue, 260), 46%, calc(var(--lightness, 20) * 1%)); box-shadow: 2px 2px 4px 0px #333; transition: box-shadow 0.15s; } button:active { box-shadow: 0px 0px 0px 0px #333; } </style> </head> <body> <button> <div class="button"> <div class="t-shirt__cannon button__cannon"> <div class="t-shirt__cannon-content"> <svg class="cannon__shirt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 16.7 87.1"> <g> <path stroke="#000" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" d="M55.1 223.9h22.7v12H55.1z" transform="matrix(0 -1.00036 .99247 0 -219.8 98)"></path> </g> </svg> <svg class="cannon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 16.7 87.1"> <g transform="matrix(0 -1.00036 .99247 0 -219.8 98)"> <path class="cannon__plastic" stroke="#000" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" d="M11.6 222.1h85.7v15.5H11.6z"></path> <rect class="cannon__shine" width="20.4" height="1.9" x="63.2" y="223.7" ry="1"></rect> <g stroke="#000" stroke-linecap="round" stroke-linejoin="round"> <path class="cannon__band" transform="matrix(-.26547 0 0 -.24756 81.3 272.7)" d="M-59.7 143v60.6h25.3v-60.7z" stroke-width="6.3"></path> </g> </g> </svg> </div> </div> <div class="t-shirt__container"> <div class="t-shirt__wrapper button__shirt"> <svg class="t-shirt t-shirt--middle" xmlns="http://www.w3.org/2000/svg" width="245" height="230" viewbox="0 0 64.8 60.9"> <defs> <clipPath id="clipMain"> <rect width="65" height="61"></rect> </clipPath> </defs> <g class="t-shirt__shirt" stroke="#000"> <g class="t-shirt__middle" clip-path="url(#clipMain)"> <path d="M90.5 151.3a9.5 4.6 0 01-9 3 9.5 4.6 0 01-9-3l-2.3.4v58.2h22.7v-58.2z" stroke-width="1.3" stroke-linecap="square" transform="matrix(1.00036 0 0 .99247 -49.2 -148.7)"></path> </g> </g> </svg> <svg class="t-shirt t-shirt--left" xmlns="http://www.w3.org/2000/svg" width="245" height="230" viewbox="0 0 64.8 60.9"> <defs> <clipPath id="clipLeft"> <rect width="22.5" height="61"></rect> </clipPath> </defs> <g class="t-shirt__shirt" stroke="#000"> <g class="t-shirt__arm t-shirt__arm--left" clip-path="url(#clipLeft)"> <path d="M251.8 109.2a36 17.5 0 01-34 11.6 36 17.5 0 01-33.9-11.6l-31.5 4.8-50 50 37 36.8 13-13v142.7h130.9V187.7l13.1 13.1 36.9-36.8-50-50z" transform="matrix(.26468 0 0 .2626 -25.2 -27.2)" stroke-width="5" stroke-linecap="square"></path> </g> </g> <.........完整代码请登录后点击上方下载按钮下载查看
网友评论0