css实现价格套餐卡片显示动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现价格套餐卡片显示动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /*@property --cost { syntax: '<integer>'; initial-value: 0; inherits: true }*/ * { margin: 0; border: none; background: transparent; color: inherit; font: inherit; text-transform: inherit; } body, body :not(script):not(style), ::before { display: grid; } body { grid-gap: 2em; grid-template-columns: repeat(auto-fit, Min(100%, 12rem)); place-content: center; min-height: 100vh; background: #222; font: 900 1.25em/1.25 sans-serif; text-align: center; text-transform: uppercase; } article { --m: calc(.5*(var(--n) - 1)); --abs: Max(calc(var(--i) - var(--m)), calc(var(--m) - var(--i))); --val: calc(var(--abs)*(1 + .5*var(--i))/var(--n)); --dt0: calc(var(--val)*1s); --dt1: calc((var(--val) + 1)*1s); --dt2: calc((var(--val) + 1.5)*1s); --dt3: calc((var(--val) + 2)*1s); --dt4: calc((var(--val) + 2.5)*1s); --dt5: calc((var(--val) + 3)*1s); overflow: hidden; padding-bottom: 1rem; backface-visibility: hidden; transform: perspective(25em); background: #fff content-box; filter: drop-shadow(4px 4px 13px); animation: card 1s ease-out var(--dt0) backwards, cost 1s var(--dt4) backwards; } article ::before, article ::after, article button { --j: 1; --sgn-j: calc(2*var(--j) - 1); --not-j: calc(1 - var(--j)); --mask: linear-gradient(calc(var(--sgn-j)*90deg), red 33.333%, transparent 66.667%) calc(var(--not-j)*100%)/ 300%; } @keyframes card { 0% { transform: perspective(25em) rotatey(0.5turn); } } header { grid-gap: 1rem; padding: 2rem 0.5em 1rem; transform-origin: 100% 100%; background: linear-gradient(var(--grad)); color: #fff; counter-reset: cost var(--cost); animation: head 1s ease-out var(--dt1) backwards; } header::before { place-self: center; place-content: center; border: solid 4px currentcolor; width: 4rem; height: 4rem; border-radius: 50%; animation: ring 1s ease-out var(--dt3) backwards; content: "$" counter(cost); } header::after { height: 4px; background: currentcolor.........完整代码请登录后点击上方下载按钮下载查看
网友评论0