正在加载视频...

视频加载失败

返回首页

UI && CSS Tip! 🚀 You can use View Transitions to create that Radix by WorkOS style theme switcher 👀 ::view-transition-new(root) { animation: reveal;} keyframes reveal { 0% { clip-path: polygon(...);} /* Code 👇 */ } Animate clip-path between modes 😍 CodePen.IO link below! 👇

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

145,997 subscribers

232,919 次观看 • 2 年前 •via X (Twitter)

科学技术教育
LIVE

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

Future CSS Tip! 🔮 Create that cool gallery effect with the scroll-driven animations API 😎 ul, img { animation-timeline: scroll(root); 👈 animation: spin; } ul { --r: 270deg; } img { --r: -270deg; } keyframes spin { to { rotate: var(--r); }} CodePen.IO link below! 👇
0:15

Future CSS Tip! 🔮 Create that cool gallery effect with the scroll-driven animations API 😎 ul, img { animation-timeline: scroll(root); 👈 animation: spin; } ul { --r: 270deg; } img { --r: -270deg; } keyframes spin { to { rotate: var(--r); }} CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

111,185 次观看 • 3 年前

Future CSS Tip! 🤞 You could create an image zoom/crop using the CSS object-view-box property 🔍 img { object-fit: cover; object-view-box: inset( var(--top) var(--right) var(--bottom) var(--left) ); } CodePen.IO link below! 👇
0:14

Future CSS Tip! 🤞 You could create an image zoom/crop using the CSS object-view-box property 🔍 img { object-fit: cover; object-view-box: inset( var(--top) var(--right) var(--bottom) var(--left) ); } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

168,050 次观看 • 2 年前

CSS Tip! ⚡️ You could use CSS trig functions to calculate animation-delay 🤓 Using them here with custom props for this DNA strand! 👩‍🔬 .node { animation-delay: calc( sin((var(--index) / var(--total)) * 45deg) 👈 * var(--speed) * -1s ); } CodePen.IO link below! 👇
0:14

CSS Tip! ⚡️ You could use CSS trig functions to calculate animation-delay 🤓 Using them here with custom props for this DNA strand! 👩‍🔬 .node { animation-delay: calc( sin((var(--index) / var(--total)) * 45deg) 👈 * var(--speed) * -1s ); } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

182,528 次观看 • 3 年前

CSS Tip! ✨ You can transition grid tracks 👀 button:hover { --h: 1; } button { transition: grid-template-columns 0.2s; grid-template-columns: calc(var(--icon) * (1 - var(--h))) 1fr calc(var(--icon) * var(--h)); } Rad for this button concept! 🤙 CodePen.IO link below! 👇
0:10

CSS Tip! ✨ You can transition grid tracks 👀 button:hover { --h: 1; } button { transition: grid-template-columns 0.2s; grid-template-columns: calc(var(--icon) * (1 - var(--h))) 1fr calc(var(--icon) * var(--h)); } Rad for this button concept! 🤙 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

107,091 次观看 • 3 年前

The subtle differences when creating a squircle 🧐 Use a generated CSS clip-path to get a finer shape 🤙 .squircle { clip-path: polygon( 100.00% 50.00%, 99.95% 62.53%, 99.80% 67.70%, ... ); } Went down the rabbit hole 🐇
0:13

The subtle differences when creating a squircle 🧐 Use a generated CSS clip-path to get a finer shape 🤙 .squircle { clip-path: polygon( 100.00% 50.00%, 99.95% 62.53%, 99.80% 67.70%, ... ); } Went down the rabbit hole 🐇

jhey ▲🐻🎈

87,803 次观看 • 2 年前

one way w/ css 🪄 stack an image 2x filter 1st, unclip 2nd on :hover 🤙 a img { grid-area: 1 / 1; } img:first-of-type { filter: grayscale(1) invert(1); } img:last-of-type { clip-path: circle(0); transition: clip-path; } a:hover img:last-of-type { clip-path: circle(100%); }
0:11

one way w/ css 🪄 stack an image 2x filter 1st, unclip 2nd on :hover 🤙 a img { grid-area: 1 / 1; } img:first-of-type { filter: grayscale(1) invert(1); } img:last-of-type { clip-path: circle(0); transition: clip-path; } a:hover img:last-of-type { clip-path: circle(100%); }

jhey ʕ•ᴥ•ʔ

320,097 次观看 • 4 个月前

Tailwind CSS Tip ✨ You can create some cool looking loaders and spinners using Tailwind CSS. Thanks to Tailscan for Tailwind CSS for the inspiration. Demo & Code 👇 (14/30) follow for 16 more tips 🔔
0:11

Tailwind CSS Tip ✨ You can create some cool looking loaders and spinners using Tailwind CSS. Thanks to Tailscan for Tailwind CSS for the inspiration. Demo & Code 👇 (14/30) follow for 16 more tips 🔔

Surjith S M ✪

140,209 次观看 • 3 年前

Tailwind CSS Tip ✨ You can create a floating input form with Tailwind CSS using ":placeholder-shown" pseudo class. Live Demo & Code 👇 (8/30) follow for 22 more tips 🔔
0:17

Tailwind CSS Tip ✨ You can create a floating input form with Tailwind CSS using ":placeholder-shown" pseudo class. Live Demo & Code 👇 (8/30) follow for 22 more tips 🔔

Surjith S M ✪

173,050 次观看 • 3 年前

CSS custom props and scroll animation for staggered effects 🤙 h2 { animation: show; animation-timeline: view(); } .char { translate: 0 calc((1 - var(--s)) * 1lh); transition: translate 0.5s calc(sin(var(--i) / var(--t) * 45deg) * 0.5s); } @​keyframes show { to { --s: 1; }}
0:11

CSS custom props and scroll animation for staggered effects 🤙 h2 { animation: show; animation-timeline: view(); } .char { translate: 0 calc((1 - var(--s)) * 1lh); transition: translate 0.5s calc(sin(var(--i) / var(--t) * 45deg) * 0.5s); } @​keyframes show { to { --s: 1; }}

jhey ʕ•ᴥ•ʔ

32,727 次观看 • 1 年前

After a long time, I've created a new pen to try out the View Transitions feature and this is really cool! 🚀🚀 CodePen.IO
0:10

After a long time, I've created a new pen to try out the View Transitions feature and this is really cool! 🚀🚀 CodePen.IO

Aysenur

83,697 次观看 • 2 年前

You can finally apply transitions on CSS display property. 👀 Combining both transition behavior and starting style, Here's how it works:
0:13

You can finally apply transitions on CSS display property. 👀 Combining both transition behavior and starting style, Here's how it works:

Ali

12,980 次观看 • 1 个月前

How I use Claude for 2D website animations 👇 1. Ask Claude to create CSS keyframes for floating or bounce effects 2. Use Claude to write fade-up animations on scroll 3. Ask Claude for parallax code for backgrounds 4. Generate hover effects like glow, scale, rotate buttons 5. Use Claude to animate text word by word 6. Paste the code, adjust timing, launch Save this tutorial 🚀
0:16

How I use Claude for 2D website animations 👇 1. Ask Claude to create CSS keyframes for floating or bounce effects 2. Use Claude to write fade-up animations on scroll 3. Ask Claude for parallax code for backgrounds 4. Generate hover effects like glow, scale, rotate buttons 5. Use Claude to animate text word by word 6. Paste the code, adjust timing, launch Save this tutorial 🚀

FHILY👑

94,198 次观看 • 1 个月前

Did you know? ✨ You can create an animated toggle switch in Tailwind CSS using ":checked" pseudo property. View Code 👇 (9/30) follow for 21 more tips 🔔
0:13

Did you know? ✨ You can create an animated toggle switch in Tailwind CSS using ":checked" pseudo property. View Code 👇 (9/30) follow for 21 more tips 🔔

Surjith S M ✪

57,984 次观看 • 3 年前

Artist & animator yosu shows how to create a zolly shot! Learn how to use keyframes to create cinematic camera motions with Clip Studio Paint!
0:14

Artist & animator yosu shows how to create a zolly shot! Learn how to use keyframes to create cinematic camera motions with Clip Studio Paint!

CLIP STUDIO PAINT

65,910 次观看 • 3 年前

Finally, we can fill the gap in React Native by offering a CSS Animation/Transition API in the upcoming Reanimated 4 🐎 Source code 👇🧵
0:11

Finally, we can fill the gap in React Native by offering a CSS Animation/Transition API in the upcoming Reanimated 4 🐎 Source code 👇🧵

Krzysztof Piaskowy

24,178 次观看 • 1 年前

finally got around to updating my site to Next.js 15 + Tailwind CSS v4. finally added a dark mode which was quite nice with oklch() + v4 theme vars. i made it greenish to complement my warm light mode. also used View Transition API + svg filter for this theme reveal effect.
0:10

finally got around to updating my site to Next.js 15 + Tailwind CSS v4. finally added a dark mode which was quite nice with oklch() + v4 theme vars. i made it greenish to complement my warm light mode. also used View Transition API + svg filter for this theme reveal effect.

Stammy

72,402 次观看 • 1 年前

✨ Build Next.js, Tailwind CSS & shadcn websites with drag and drop. And yes, you can export the code. Link below.
0:16

✨ Build Next.js, Tailwind CSS & shadcn websites with drag and drop. And yes, you can export the code. Link below.

Mattia

205,173 次观看 • 1 年前

💡 CSS Tip! Do you know that One-Time password field? You can create it using only one input and a few lines of CSS. The HTML: <input type="text" maxlength="6"> Code & Demo: You can control the number of characters by adjusting the maxlength attribute.
0:14

💡 CSS Tip! Do you know that One-Time password field? You can create it using only one input and a few lines of CSS. The HTML: <input type="text" maxlength="6"> Code & Demo: You can control the number of characters by adjusting the maxlength attribute.

CSS by T. Afif

25,194 次观看 • 1 年前

Hotel management dashboard template. Built with React, Tailwind CSS & shadcn/ui 👇👇
0:13

Hotel management dashboard template. Built with React, Tailwind CSS & shadcn/ui 👇👇

Toby

88,879 次观看 • 3 个月前