正在加载视频...

视频加载失败

🤌 Blurry blobs with Tailwind CSS 1️⃣ create a few colorful shapes 2️⃣ add some blur and mix-blend-modes 3️⃣ keyframe the position & size of the shapes 4️⃣ stagger the animation-delay for randomness

23,445 次观看 • 1 年前 •via X (Twitter)

11 条评论

Patrick the LLM Engineer 的头像
Patrick the LLM Engineer1 年前

Do you mind sharing a CodePen?

Simon Vrachliotis 的头像
Simon Vrachliotis1 年前

I should do that yeah! I'll make some time to add a Tailwind Play for each clip.

Alex Casillas —アレックス 的头像
Alex Casillas —アレックス1 年前

Beautiful 😍

Simon Vrachliotis 的头像
Simon Vrachliotis1 年前

🤙🤙

Chris Sev 的头像
Chris Sev1 年前

amazing

Simon Vrachliotis 的头像
Simon Vrachliotis1 年前

Gotta love blurry blobs 😎

John Champ 的头像
John Champ1 年前

Extra clean, super beautiful! 😍👏

Simon Vrachliotis 的头像
Simon Vrachliotis1 年前

Thanks ✌️

jhey ▲🐻🎈 的头像
jhey ▲🐻🎈1 年前

Love seeing different approaches with Tailwind 👏 For me, I'd likely hoist some of those classes onto the parent to target the children blobs. And then I'd inline some custom properties on them to handle delay and translate across 2 reusable keyframes (x, y) 🤔

Matan Borenkraout 🥬 的头像
Matan Borenkraout 🥬1 年前

Thanks for this one, I re-did the shadow of the main image on my personal site with your help :)

Simon Vrachliotis 的头像
Simon Vrachliotis1 年前

Very nice!

相关视频