Анимация ценовых карточек (HTML код)
<body style="--n: 3">
<article style="--i: 0; --cost: 9; --grad: #0fcf7b, #0c9f30">
<header>
<h3 data-name="basic"></h3>
</header>
<section>
<button>sign up</button>
</section>
</article>
<article style="--i: 1; --cost: 19; --grad: #f7256e, #cc0c48">
<header>
<h3 data-name="standard"></h3>
</header>
<section>
<button>sign up</button>
</section>
</article>
<article style="--i: 2; --cost: 29; --grad: #f7ea1f, #f87d2c">
<header>
<h3 data-name="premium"></h3>
</header>
<section>
<button>sign up</button>
</section>
</article>
Анимация ценовых карточек (CSS код)
/*@property --cost {
syntax: '';
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;
clip-path: inset(0 round 4px);
animation: line 1s ease-out var(--dt2) backwards;
content: "";
}
@keyframes head {
0% {
transform: translate(-100%) skewx(35deg);
}
}
@keyframes ring {
0% {
transform: scale(0);
opacity: 0;
}
}
@keyframes line {
0% {
clip-path: inset(0 50% round 4px);
}
}
h3::before, h3::after {
place-self: center;
-webkit-mask: var(--mask);
mask: var(--mask);
animation: text 1s ease-out var(--dt5) backwards;
}
h3::before {
--j: 0;
animation-name: text, move;
content: attr(data-name);
}
h3::after {
font-size: 0.6em;
font-weight: 100;
content: "subscription";
}
@keyframes move {
0% {
transform: translate(50%);
}
}
section {
margin-bottom: -1rem;
border-bottom: solid 1rem transparent;
background-color: inherit;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1rem), 50% 100%, 0 calc(100% - 1rem));
}
button {
place-content: center;
line-height: 3;
-webkit-mask: var(--mask);
mask: var(--mask);
cursor: pointer;
animation: text 1s ease-out var(--dt2) backwards;
}
@keyframes text {
0% {
-webkit-mask-position: calc(var(--j)*100%);
mask-position: calc(var(--j)*100%);
}
}
Анимация ценовых карточек (Результат кода)
Comments