- let data = [
- 	{ name: 'basic', cost: 9, grad: '#0fcf7b, #0c9f30' }, 
- 	{ name: 'standard', cost: 19, grad: '#f7256e, #cc0c48' }, 
- 	{ name: 'premium', cost: 29, grad: '#f7ea1f, #f87d2c' }
- ];
- let n = data.length;

body(style=`--n: ${n}`)
	- for(let i = 0; i < n; i++)
		- let c = data[i];
		article(style=`--i: ${i}; --cost: ${c.cost}; --grad: ${c.grad}`)
			header: h3(data-name=c.name)
			section: button sign up
View Compiled
$w: 12rem;
$d: $w/3;
$l: 4px;
$a: 1rem;
$t: 1s;

/*@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%, $w));
	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)*#{$t});
	--dt1: calc((var(--val) + 1)*#{$t});
	--dt2: calc((var(--val) + 1.5)*#{$t});
	--dt3: calc((var(--val) + 2)*#{$t});
	--dt4: calc((var(--val) + 2.5)*#{$t});
	--dt5: calc((var(--val) + 3)*#{$t});
	overflow: hidden;
	padding-bottom: $a;
	backface-visibility: hidden;
	transform: perspective(25em);
	background: #fff content-box;
	filter: drop-shadow(4px 4px 13px);
	animation: card $t ease-out var(--dt0) backwards, 
		cost $t var(--dt4) backwards;
	
	::before, ::after, 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(.5turn) }
}

header {
	grid-gap: $a;
	padding: 2*$a .5em $a;
	transform-origin: 100% 100%;
	background: linear-gradient(var(--grad));
	color: #fff;
	counter-reset: cost var(--cost);
	animation: 
		head $t ease-out var(--dt1) backwards;
	
	&::before {
		place-self: center;
		place-content: center;
		border: solid $l currentcolor;
		width: $d; height: $d;
		border-radius: 50%;
		animation: ring $t ease-out var(--dt3) backwards;
		content: '$' counter(cost)
	}
	
	&::after {
		height: $l;
		background: currentcolor;
		clip-path: inset(0 round $l);
		animation: line $t ease-out var(--dt2) backwards;
		content: ''
	}
}

@keyframes head {
	0% { transform: translate(-100%) skewx(35deg) }
}

@keyframes ring {
	0% {
		transform: scale(0);
		opacity: 0
	}
}

//@keyframes cost { 0% { --cost: 0 } }

@keyframes line {
	0% { clip-path: inset(0 50% round $l) }
}

h3 {
	&::before, &::after {
		place-self: center;
		mask: var(--mask);
		animation: text $t ease-out var(--dt5) backwards
	}
	
	&::before {
		--j: 0;
		animation-name: text, move;
		content: attr(data-name)
	}
	
	&::after {
		font-size: .6em;
		font-weight: 100;
		content: 'subscription'
	}
}

@keyframes move { 0% { transform: translate(50%) } }

section {
	margin-bottom: -$a;
	border-bottom: solid $a transparent;
	background-color: inherit;
	clip-path: 
		polygon(0 0, 100% 0, 
			100% calc(100% - #{$a}), 50% 100%, 0 calc(100% - #{$a}))
}

button {
	place-content: center;
	line-height: 3;
	mask: var(--mask);
	cursor: pointer;
	animation: text $t ease-out var(--dt2) backwards
}

@keyframes text {
	0% { mask-position: calc(var(--j)*100%) }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.