css实现订单完成按钮点击动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现订单完成按钮点击动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap'> <style> :root { --primary: #275EFE; --primary-light: #7699FF; --dark: #1C212E; --grey-dark: #3F4656; --grey: #6C7486; --grey-light: #CDD9ED; --white: #FFF; --green: #16BF78; --sand: #DCB773; --sand-light: #EDD9A9; } .order { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; background: var(--dark); position: relative; height: 63px; width: 240px; padding: 0; outline: none; cursor: pointer; border-radius: 32px; -webkit-mask-image: -webkit-radial-gradient(white, black); -webkit-tap-highlight-color: transparent; overflow: hidden; transition: transform 0.3s ease; } .order span { --o: 1; position: absolute; left: 0; right: 0; text-align: center; top: 19px; line-height: 24px; color: var(--white); font-size: 16px; font-weight: 500; opacity: var(--o); transition: opacity 0.3s ease; } .order span.default { transition-delay: 0.3s; } .order span.success { --offset: 16px; --o: 0; } .order span.success svg { width: 12px; height: 10px; display: inline-block; vertical-align: top; fill: none; margin: 7px 0 0 4px; stroke: var(--green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16px; stroke-dashoffset: var(--offset); transition: stroke-dashoffset 0.3s ease; } .order:active { transform: scale(0.96); } .order .lines { opacity: 0; position: absolute; height: 3px; background: var(--white); border-radius: 2px; width: 6px; top: 30px; left: 100%; box-shadow: 15px 0 0 var(--white), 30px 0 0 var(--white), 45px 0 0 var(--white), 60px 0 0 var(--white), 75px 0 0 var(--white), 90px 0 0 var(--white), 105px 0 0 var(--white), 120px 0 0 var(--white), 135px 0 0 var(--white), 150px 0 0 var(--white), 165px 0 0 var(--white), 180px 0 0 var(--white), 195px 0 0 var(--white), 210px 0 0 var(--white), 225px 0 0 var(--white), 240px 0 0 var(--white), 255px 0 0 var(--white), 270px 0 0 var(--white), 285px 0 0 var(--white), 300px 0 0 var(--white), 315px 0 0 var(--white), 330px 0 0 var(--white); } .order .back, .order .box { --start: var(--white); --stop: var(--grey-light); border-radius: 2px; background: linear-gradient(var(--start), var(--stop)); position: absolute; } .order .truck { width: 60px; height: 41px; left: 100%; z-index: 1; top: 11px; position: absolute; transform: translateX(24px); } .order .truck:before, .order .truck:after { --r: -90deg; content: ""; height: 2px; width: 20px; right: 58px; position: absolute; display: block; background: var(--white); border-radius: 1px; transform-origin: 100% 50%; transform: rotate(var(--r)); } .order .truck:before { top: 4px; } .order .truck:after { --r: 90deg; bottom: 4px; } .order .truck .back { left: 0; top: 0; width: 60px; height: 41px; z-index: 1; } .order .truck .front { overflow: hidden; position: absolute; border-radius: 2px 9px 9px 2px; width: 26px; height: 41px; left: 60px; } .order .truck .front:before, .order .truck .front:after { content: ""; position: absolute; display: block; } .order .truck .front:before { height: 13px; width: 2px; left: 0; top: 14px; background: linear-gradient(var(--grey), var(--grey-dark)); } .order .truck .front:after { border-radius: 2px 9px 9px 2px; background: var(--primary); width: 24px; height: 41px; right: 0; } .order .truck .front .window { overflow: hidden; border-radius: 2px 8px 8px 2px; background: var(--primary-light); transform: perspective(4px) rotateY(3deg); width: 22px; height: 41px; position: absolute; left: 2px; top: 0; z-index: 1; transform-origin: 0 50%; } .order .truck .front .window:before, .order .truck .front .window:after { content: ""; position: absolute; right: 0; } .order .truck .front .window:before { top: 0; bottom: 0; width: 14px; background: var(--dark); } .order .truck .front .window:after { width: 14px; top: 7px; height: 4px; position: absolute; background: rgba(255, 255, 255, 0.14); transform: skewY(14deg); box-shadow: 0 7px 0 rgba(255, 255, 255, 0.14); } .order .truck .light { width: 3px; height: 8px; left: 83px; transform-origin: 100% 50%; position: absolute; border-radius: 2px; transform: scaleX(0.8); background: #f0dc5f; } .order .truck .light:before { content: ""; height: 4px; width: 7px; opacity: 0; transform: perspective(2px) rotateY(-15deg) scaleX(0.94); position: absolute; transform-origin: 0 50%; left: 3px; top: 50%; margin-top: -2px; background: linear-gradient(90deg, #f0dc5f, rgba(240, 220, 95, 0.7), rgba(240, 220, 95, 0)); } .order .truck .light.top { top: 4px; } .order .truck .light.bottom { bottom: 4px; } .order .box { --start: var(--sand-light); --stop: var(--sand); width: 21px; height: 21px; right: 100%; t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0