添加到购物车效果
代码语言:html
所属分类:电商
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .button { --background: #362A89; --text: #fff; --cart: #fff; --tick: var(--background); position: relative; border: none; background: none; padding: 8px 28px; border-radius: 8px; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; -webkit-mask-image: -webkit-radial-gradient(white, black); overflow: hidden; cursor: pointer; text-align: center; min-width: 144px; color: var(--text); background: var(--background); -webkit-transform: scale(var(--scale, 1)); transform: scale(var(--scale, 1)); -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.36, 1.01, 0.32, 1.27); transition: -webkit-transform 0.4s cubic-bezier(0.36, 1.01, 0.32, 1.27); transition: transform 0.4s cubic-bezier(0.36, 1.01, 0.32, 1.27); transition: transform 0.4s cubic-bezier(0.36, 1.01, 0.32, 1.27), -webkit-transform 0.4s cubic-bezier(0.36, 1.01, 0.32, 1.27); } .button:active { --scale: .95; } .button span { font-size: 14px; font-weight: 500; display: block; position: relative; padding-left: 24px; margin-left: -8px; line-height: 26px; -webkit-transform: translateY(var(--span-y, 0)); transform: translateY(var(--span-y, 0)); -webkit-transition: -webkit-transform .7s ease; transition: -webkit-transform .7s ease; transition: transform .7s ease; transition: transform .7s ease, -webkit-transform .7s ease; } .button span:before, .button span:after { content: ''; width: var(--w, 2px); height: var(--h, 14px); border-radius: 1px; position: absolute; left: var(--l, 8px); top: var(--t, 6px); background: currentColor; -webkit-transform: scale(0.75) rotate(var(--icon-r, 0deg)) translateY(var(--icon-y, 0)); transform: scale(0.75) rotate(var(--icon-r, 0deg)) translateY(var(--icon-y, 0)); -webkit-transition: -webkit-transform .65s ease .05s; transition: -webkit-transform .65s ease .05s; transition: transform .65s ease .05s; transition: transform .65s ease .05s, -webkit-transform .65s ease .05s; } .button span:after { --w: 14px; --h: 2px; --l: 2px; --t: 12px; } .button .cart { position: absolute; left: 50%; top: 50%; margin: -13px 0 0 -18px; -webkit-transform-origin: 12px 23px; transform-origin: 12px 23px; -webkit-transform: translateX(-120px) rotate(-18deg); transform: translateX(-120px) rotate(-18deg); } .button .cart:before, .button .cart:after { content: ''; position: absolute; } .button .cart:before { width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--cart); bottom: 0; left: 9px; -webkit-filter: drop-shadow(11px 0 0 var(--cart)); filter: drop-shadow(11px 0 0 var(--cart)); } .button .cart:after { width: 16px; height: 9px; background: var(--cart); left: 9px; bottom: 7px; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: perspective(4px) rotateX(-6deg) scaleY(var(--fill, 0)); transform: perspective(4px) rotateX(-6deg) scaleY(var(--fill, 0)); -webkit-transition: -webkit-transform 1.2s ease var(--fill-d); transition: -webkit-transform 1.2s ease var(--fill-d); transition: transform 1.2s ease var(--fill-d); transition: transform 1.2s ease var(--fill-d), -webkit-transform 1.2s ease var(--fill-d); } .button .cart svg { z-index: 1; width: 36px; height: 26px; display: block; position: relative; fill: none; stroke: var(--cart); stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; } .button .cart svg polyline:la.........完整代码请登录后点击上方下载按钮下载查看
网友评论0