订单完成动画按钮特效
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .truck-button { --color: #fff; --background: #2B3044; --tick: #16BF78; --base: #0D0F18; --wheel: #2B3044; --wheel-inner: #646B8C; --wheel-dot: #fff; --back: #6D58FF; --back-inner: #362A89; --back-inner-shadow: #2D246B; --front: #A6ACCD; --front-shadow: #535A79; --front-light: #FFF8B1; --window: #2B3044; --window-shadow: #404660; --street: #646B8C; --street-fill: #404660; --box: #DCB97A; --box-shadow: #B89B66; padding: 12px 0; width: 172px; cursor: pointer; text-align: center; position: relative; border: none; outline: none; color: var(--color); background: var(--background); border-radius: var(--br, 5px); -webkit-appearance: none; -webkit-tap-highlight-color: transparent; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(var(--rx, 0deg)) translateZ(0); transform: rotateX(var(--rx, 0deg)) translateZ(0); transition: border-radius 0.3s linear var(--br-d, 0s), -webkit-transform 0.5s; transition: transform 0.5s, border-radius 0.3s linear var(--br-d, 0s); transition: transform 0.5s, border-radius 0.3s linear var(--br-d, 0s), -webkit-transform 0.5s; } .truck-button:before, .truck-button:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 6px; display: block; background: var(--b, var(--street)); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: rotateX(90deg) scaleX(var(--sy, 1)); transform: rotateX(90deg) scaleX(var(--sy, 1)); } .truck-button:after { --sy: var(--progress, 0); --b: var(--street-fill); } .truck-button .default, .truck-button .success { display: block; font-weight: 500; font-size: 14px; line-height: 24px; opacity: var(--o, 1); transition: opacity .3s; } .truck-button .success { --o: 0; position: absolute; top: 12px; left: 0; right: 0; } .truck-button .success svg { width: 12px; height: 10px; display: inline-block; vertical-align: top; fill: none; margin: 7px 0 0 4px; stroke: var(--tick); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16px; stroke-dashoffset: var(--offset, 16px); transition: stroke-dashoffset .4s ease .45s; } .truck-button .truck { position: absolute; width: 72px; height: 28px; -webkit-transform: rotateX(90deg) translate3d(var(--truck-x, 4px), calc(var(--truck-y-n, -26) * 1px), 12px); transform: rotateX(90deg) translate3d(var(--truck-x, 4px), calc(var(--truck-y-n, -26) * 1px), 12px); } .truck-button .truck:before, .truck-button .truck:after { content: ''; position: absolute; bottom: -6px; left: var(--l, 18px); width: 10px; height: 10px; border-radius: 50%; z-index: 2; box-shadow: inset 0 0 0 2px var(--wheel), inset 0 0 0 4px var(--wheel-inner); background: var(--wheel-dot); -webkit-transform: translateY(calc(var(--truck-y) * -1px)) translateZ(0); transform: translateY(calc(var(--truck-y) * -1px)) translateZ(0); } .truck-button .truck:after { --l: 54px; } .truck-button .truck .wheel, .truck-button .truck .wheel:before { position: absolute; bottom: var(--b, -6px); left: var(--l, 6px); width: 10px; height: 10px; border-radius: 50%; background: var(--wheel); -webkit-transform: translateZ(0); transform: translateZ(0); } .truck-button .truck .wheel { -webkit-transform: translateY(calc(var(--truck-y) * -1px)) translateZ(0); transform: translateY(calc(var(--truck-y) * -1px)) translateZ(0); } .truck-button .truck .wheel:before { --l: 35px; --b: 0; content: ''; } .truck-button .truck .front, .truck-button .truck .back, .truck-button .truck .box { position: absolute; } .truck-button .truck .back { left: 0; bottom: 0; z-index: 1; width: 47px; height: 28px; border-radius: 1px 1px 0 0; background: linear-gradient(68deg, var(--back-inner) 0%, var(--back-inner) 22%, var(--back-inner-shadow) 22.1%, var(--back-inner-shadow) 100%); } .truck-button .truck .back:before, .truck-button .truck .back:after { content: ''; position: absolute; } .truck-button .truck .back:before { left: 11px; top: 0; right: 0; bottom: 0; z-index: 2; border-radius: 0 1px 0 0; background: var(--back); } .truck-button .truck .back:after { border-radius: 1px; width: 73px; height: 2px; left: -1px; bottom: -2px; background: var(--base); } .truck-button .truck .front { left: 47px; bottom: -1px; height: 22px; width: 24px; -webkit-clip-path: polygon(55% 0, 72% 44%, 100% 58%, 100% 100%, 0 100%, 0 0); clip-path: polygon(55% 0, 72% 44%, 100% 58%, 100% 100%, 0 100%, 0 0); background: linear-gradient(84deg, var(--front-shadow) 0%, var(--front-shadow) 10%, var(--front) 12%, var(--front) 100%); } .truck-button .truck .front:before, .truck-button .truck .front:after { content: ''; position: absolute; } .truck-button .truck .front:before { width: 7px; height: 8px; background: #fff; left: 7px; top: 2px; -webkit-clip-path: polygon(0 0, 60% 0%, 100% 100%, 0% 100%); clip-path: polygon(0 0, 60% 0%, 100% 100%, 0% 100%); background: linear-gradient(59deg, var(--window) 0%, var(--window) 57%, var(--window-shadow) 55%, var(--window-shadow) 100%); } .truck-button .truck .front:after {.........完整代码请登录后点击上方下载按钮下载查看
网友评论0