<head>
<style>
@import "https://unpkg.com/open-props@1.6.17/easings.min.css";
@keyframes shake {
50% {
transform: translate3d(20px, 0, 0);
}
}
@keyframes flip {
100% {
transform: rotateY(180deg);
}
}
@keyframes pulse {
50% {
transform: scale(1.5);
}
}
@keyframes glitch {
50% {
transform: skew(180deg);
}
}
@keyframes fill {
50% {
transform: translateX(-5%);
}
}
@keyframes sheen {
100% {
transform: rotateZ(60deg) translate(1em, -9em);
}
}
@keyframes glow {
50% {
box-shadow: 0 0 40px hsl(12, 100%, 60%);
}
}
@keyframes tonyhawk {
50%,
100% {
transform: rotate(900deg);
}
}
@keyframes blur {
50% {
filter: blur(20px);
transform: skew(45deg);
}
}
[anim="shake"]:not(.toggled) {
animation: shake var(--ease-elastic-in-1) 300ms infinite alternate;
}
[anim="pulse"]:not(.toggled) {
animation: pulse var(--ease-elastic-in-1) 1400ms infinite alternate;
}
[anim="glitch"]:not(.toggled) {
animation: glitch var(--ease-elastic-in-1) 600ms infinite;
}
[anim="tonyhawk"]:not(.toggled) {
animation: tonyhawk var(--ease-elastic-in-1) 600ms infinite;
}
[anim="flip"]:not(.toggled) {
animation: flip var(--ease-elastic-in-1) 600ms infinite alternate;
}
[anim="fill"]:not(.toggled)::after {
animation: fill var(--ease-spring-1) 8000ms infinite;
}
[anim="sheen"]:not(.toggled)::after {
animation: sheen var(--ease-elastic-in-1) 1s infinite;
}
[anim="glow"]:not(.toggled) {
animation: glow var(--ease-elastic-in-1) 600ms infinite alternate;
}
[anim="blur"]:not(.toggled) {
animation: blur var(--ease-elastic-in-1) 1s infinite alternate;
}
[anim="fill"]::after {
content: "";
color: var(--black);
position: absolute;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.75rem;
height: 100%;
width: 200%;
inset: 0;
transform: translateX(-400px);
background-color: hsl(12, 90%, 63%);
}
[anim="sheen"]::after {
content: "";
position: absolute;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
background: var(--red-sheen);
transform: rotateZ(60deg) translate(-5em, 7.5em);
}
:root {
--black: hsl(0, 0%, 13%);
--dark: hsl(12, 32%, 2%);
--gray: hsl(0, 0%, 70%);
--white: hsl(0, 0%, 96%);
--red: hsl(12, 90%, 63%);
--red-shadow: hsl(12, 100%, 60%);
--red-sheen: linear-gradient(
to bottom,
hsl(12, 90%, 43%),
hsla(12, 40%, 70%, 0.5) 50%,
hsl(12, 93%, 23%)
);
}
html,
body {
background-color: var(--black);
}
div:has(h2 + p) {
display: grid;
gap: 8px;
}
h2 {
font-size: 1.25rem;
}
h2 + p {
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--gray);
font-size: 0.875rem;
}
main {
max-width: 880px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
justify-content: center;
align-items: center;
}
article {
display: flex;
flex-wrap: wrap;
gap: 64px;
align-items: center;
justify-content: center;
min-height: 100dvh;
position: relative;
padding-block: 32px;
&::after {
content: "";
width: 100%;
position: absolute;
height: 1px;
bottom: 0;
background-image: linear-gradient(45deg, var(--red), transparent 70%);
}
}
section {
display: flex;
flex-direction: column;
gap: 16px;
flex-basis: 180px;
justify-content: center;
align-items: center;
text-align: center;
}
section {
color: var(--white);
font-family: "aglet-mono-variable", sans-serif;
font-variation-settings: "wght" 400;
}
* {
font-family: inherit;
box-sizing: border-box;
}
button {
all: unset;
background-color: var(--black);
padding: 6px 12px;
border-radius: 6px;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.04em;
border: 1px solid var(--red);
box-shadow: 0 0 4px var(--red-shadow);
cursor: pointer;
perspective: 1000px;
position: relative;
overflow: hidden;
}
.blurry {
position: relative;
transform-style: preserve-3d;
}
.blurry::before {
content: "";
position: absolute;
inset: 0px;
transform: translate3d(0px, 0px, -1px);
background: var(--red-shadow);
filter: blur(6px);
}
</style>
<script>
let anims = [...document.querySelectorAll("[anim]")];
console.log(anims);
let click = (el, cb) => el.addEventListener("click", cb);
let toggle = (el) => el.classList.toggle("toggled");
let clickTog = (el) => click(el, () => toggle(el));
anims.map(clickTog);
</script>
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
</head>
<main>
<article>
<section>
<div>
<h2>Shakes</h2>
<p>Rejecti{ng</p>
</div>
<div>
<button>CLICK ME</button>
<img class="animate__animated animate__fadeInUp animate__delay-3s" anim="shake" src="https://klinkhs.com/wp-content/uploads/2025/07/drink-to-your.jpg" width="244" height="144">
</div>
</section>
<section>
<div>
<h2>Pulse</h2>
<p>Partying</p>
</div>
<div>
<button anim="pulse">CLICK ME</button>
</div>
</section>
<section>
<div>
<h2>Glitch</h2>
<p>Hacking</p>
</div>
<div>
<button anim="glitch">CLICK ME</button>
</div>
</section>
<section>
<div>
<h2>Turn</h2>
<p>Flipping</p>
</div>
<div>
<button anim="flip">CLICK ME</button>
</div>
</section>
<section>
<div>
<h2>Fill</h2>
<p>Loading</p>
</div>
<div>
<button anim="fill">Click me</button>
</div>
</section>
<section>
<div>
<h2>Sheen</h2>
<p>Shining</p>
</div>
<div>
<button anim="sheen">Click me</button>
</div>
</section>
<section>
<div>
<h2>Emphasize</h2>
<p>Glowing</p>
</div>
<div>
<button anim="glow">Click me</button>
</div>
</section>
<section>
<div>
<h2>Blur</h2>
<p>Censoring</p>
</div>
<div>
<button anim="blur">CLICK ME</button>
</div>
</section>
<section>
<div>
<h2>Tony Hawk</h2>
<p>900-ing</p>
</div>
<div>
<button anim="tonyhawk">CLICK ME</button>
</div>
</section>
</article>
<article>
<section>
<div>
<h2>Shakes</h2>
<p>Rejecting</p>
</div>
<div>
<button anim="shake">CLICK ME</button>
</div>
</section>
</article>
<article>
<section>
<div>
<h2>Pulse</h2>
<p>Partying</p>
</div>
<div>
<button anim="pulse">CLICK ME</button>
</div>
</section>
</article>
<article>
<section>
<div>
<h2>Glitch</h2>
<p>Hacking</p>
</div>
<div>
<button anim="glitch">CLICK ME</button>
</div>
</section>
</article>
<article>
<section>
<div>
<h2>Turn</h2>
<p>Flipping</p>
</div>
<div>
<button anim="flip">CLICK ME</button>
</div>
</section>
</article>
<article>
<section>
<div>
<h2>Fill</h2>
<p>Loading</p>
</div>
<div>
<button anim="fill">Click me</button>
</div>
</section>
</article>
<article>
<section>
<div>
<h2>Sheen</h2>
<p>Shining</p>
</div>
<div>
<button anim="sheen">Click me</button>
</div>
</section>
</article>
<article>
<section>
<div>
<h2>Emphasize</h2>
<p>Glowing</p>
</div>
<div>
<button anim="glow">Click me</button>
</div>
</section>
</article>
<article>
<section>
<div>
<h2>Blur</h2>
<p>Censoring</p>
</div>
<div>
<button anim="blur">CLICK ME</button>
</div>
</section>
</article>
<article>
<section>
<div>
<h2>Tony Hawk</h2>
<p>900-ing</p>
</div>
<div>
<button anim="tonyhawk">CLICK ME</button>
</div>
</section>
</article>
</main>
No comments:
Post a Comment