正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

messin' with text using CSS + SVG 🤌

jhey ʕ•ᴥ•ʔ

144,226 subscribers

85,634 次观看 • 1 年前 •via X (Twitter)

教育艺术科学技术

Anya Rossi• Live Now

Private livecam show

10 条评论

trav 的头像

trav1 年前

dude fucking a

Juan 的头像

Juan1 年前

Wooooooooooooow. Dude... how do you come with this ideas =O!!

Λbstract 的头像

Λbstract1 年前

RT @InstaMAT_io: 👀 Are you looking for an alternative to Adobe Substance tools? Do not miss out on InstaMAT from killer node-based material…

Narek 的头像

Narek1 年前

You're doing a fantastic job!

Shine Dark 的头像

Shine Dark1 年前

Are you using a grid or calculating the placement ? This is sick gives me so many ideas

jhey ▲🐻🎈 的头像

jhey ▲🐻🎈1 年前

the animated part is all SVG leveraging the fact that SVG is overflow: hidden by default and using transform-box: fill-box to animate the groups within using CSS 🤙

Lethabo Sekoto 的头像

Lethabo Sekoto1 年前

one of the animations i've seen in a while, nice!!

@drip 的头像

@drip1 年前

thanks for showing behind the scenes.

Tyler Pashigian 的头像

Tyler Pashigian1 年前

This is awesome. Kinda reminds me of been very curious how that works

Paschal 的头像

Paschal1 年前

Wizardry

相关视频

messin' with CSS + SVG filter sticker effects 🧑‍🍳

messin' with CSS + SVG filter sticker effects 🧑‍🍳

jhey ʕ•ᴥ•ʔ

160,723 次观看 • 1 年前

CSS Scroll-driven knockout text using SVG filter 🥊 section { filter: url(#knockout); } section h1 { animation: shrink; } @keyframes shrink { 0% { scale: 36; }} Animate text scale on a video overlay ✅ Knock out text using SVG filter ✅ Drive with scroll ✅

CSS Scroll-driven knockout text using SVG filter 🥊 section { filter: url(#knockout); } section h1 { animation: shrink; } @keyframes shrink { 0% { scale: 36; }} Animate text scale on a video overlay ✅ Knock out text using SVG filter ✅ Drive with scroll ✅

jhey ʕ•ᴥ•ʔ

100,075 次观看 • 1 年前

Liquid Glass with CSS and SVG

Liquid Glass with CSS and SVG

Andreas Storm

71,027 次观看 • 6 个月前

dissolving text input with SVG noise + CSS filter, displace + mask duplicate layer whilst clipping the original 🤙 check the exploded view 👇

dissolving text input with SVG noise + CSS filter, displace + mask duplicate layer whilst clipping the original 🤙 check the exploded view 👇

jhey ʕ•ᴥ•ʔ

43,591 次观看 • 1 年前

figured out how to do motion blurs in the browser using svg filters and css

figured out how to do motion blurs in the browser using svg filters and css

ravarcheon

24,707 次观看 • 6 个月前

Updated my SVG-to-CSS converter to support multiple path elements. An easy way to convert complex SVG shapes into CSS. It's a single-element implementation with a single shape() value! You can also have the border-only version using border-shape.

Updated my SVG-to-CSS converter to support multiple path elements. An easy way to convert complex SVG shapes into CSS. It's a single-element implementation with a single shape() value! You can also have the border-only version using border-shape.

CSS by T. Afif

15,155 次观看 • 2 个月前

Stickers made with css and svg filters, inspired by the awesome work of Mats Erdkamp and Guillermo Rauch The peel effect is entirely CSS (transformations and masking), while the sticker outline, the shadow, and the lighting was created using SVG filters. Codepen dropping soon below!

Stickers made with css and svg filters, inspired by the awesome work of Mats Erdkamp and Guillermo Rauch The peel effect is entirely CSS (transformations and masking), while the sticker outline, the shadow, and the lighting was created using SVG filters. Codepen dropping soon below!

balint

55,512 次观看 • 11 个月前

you can just create fire with CSS + SVG filters ┬┴┬┴┤ʕ•ᴥ├┬┴┬┴

you can just create fire with CSS + SVG filters ┬┴┬┴┤ʕ•ᴥ├┬┴┬┴

jhey ʕ•ᴥ•ʔ

103,624 次观看 • 1 年前

"roll for premium" with CSS, [type=range], and an SVG noise filter 🤙

"roll for premium" with CSS, [type=range], and an SVG noise filter 🤙

jhey ʕ•ᴥ•ʔ

222,102 次观看 • 1 年前

riffin' on forms is fun 3D CSS transforms + SVG filtering with feDisplacementMap 🤙

riffin' on forms is fun 3D CSS transforms + SVG filtering with feDisplacementMap 🤙

jhey ʕ•ᴥ•ʔ

27,241 次观看 • 1 年前

$Future CSS Tip! 🍏 You can create that Apple style blow out text effect with CSS scroll-driven animations ⚡️ No JavaScript! The trick is to animate SVG text along the z-axis using 3D transforms 👀 .word { animation: blow-out both ease-in; animation-timeline: --section; 👈 animation-range: exit-crossing 10% exit 0%; } keyframes blow-out { to { transform: translate3d(0.05ch, 0, 99vh); } } The animation makes the text cover the viewport and blends into the next section which has the same background-color 🤙 The section is set to 200vh. But the wrapper around the SVG text defines perspective and transform-style .section__content { transform-style: preserve-3d; 👈 perspective: 100vh; } We're using an SVG to maintain the crispness of the text as it scales up ✨ Use these attributes on the within the SVG to align things 🤙 Your Name It's the last day of #AppleEvent week but I do have some more of these I'll put together next week 😉 CodePen.IO link below! 👇$

Future CSS Tip! 🍏 You can create that Apple style blow out text effect with CSS scroll-driven animations ⚡️ No JavaScript! The trick is to animate SVG text along the z-axis using 3D transforms 👀 .word { animation: blow-out both ease-in; animation-timeline: --section; 👈 animation-range: exit-crossing 10% exit 0%; } keyframes blow-out { to { transform: translate3d(0.05ch, 0, 99vh); } } The animation makes the text cover the viewport and blends into the next section which has the same background-color 🤙 The section is set to 200vh. But the wrapper around the SVG text defines perspective and transform-style .section__content { transform-style: preserve-3d; 👈 perspective: 100vh; } We're using an SVG to maintain the crispness of the text as it scales up ✨ Use these attributes on the within the SVG to align things 🤙 Your Name It's the last day of #AppleEvent week but I do have some more of these I'll put together next week 😉 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

348,255 次观看 • 2 年前

curved scrollbar: completed it ✅ CSS + SVG to animate stroke-dashoffset combined with scroll-snap

curved scrollbar: completed it ✅ CSS + SVG to animate stroke-dashoffset combined with scroll-snap

jhey ʕ•ᴥ•ʔ

229,714 次观看 • 1 年前

CSS + SVG flames iteration 🔥 "iterate to greatness" 🤞

CSS + SVG flames iteration 🔥 "iterate to greatness" 🤞

jhey ʕ•ᴥ•ʔ

66,297 次观看 • 1 年前

text-to-svg/icon Figma plugin built with Next.js, shadcn UI, and Tailwind CSS + Replicate API! It's open source, and I hope it helps anyone looking to build their own plugin! 🤠 Github:

text-to-svg/icon Figma plugin built with Next.js, shadcn UI, and Tailwind CSS + Replicate API! It's open source, and I hope it helps anyone looking to build their own plugin! 🤠 Github:

Lichin Lin

25,124 次观看 • 1 年前

messin' with physics 👨‍🍳 text in the DOM, blocks on <canvas> ✨

messin' with physics 👨‍🍳 text in the DOM, blocks on <canvas> ✨

jhey ʕ•ᴥ•ʔ

382,988 次观看 • 1 年前

curved scrollbar 👨‍🍳 powered by GSAP + CSS scroll-snap + SVG

curved scrollbar 👨‍🍳 powered by GSAP + CSS scroll-snap + SVG

jhey ʕ•ᴥ•ʔ

97,263 次观看 • 1 年前

text-wrap - CSS

text-wrap - CSS

Ali Reza

38,294 次观看 • 1 年前

cross-browser liquid toggle 👨‍🔬 CSS + SVG filter + drag mechanics 🧑‍🍳 (exploding view 👇)

cross-browser liquid toggle 👨‍🔬 CSS + SVG filter + drag mechanics 🧑‍🍳 (exploding view 👇)

jhey ʕ•ᴥ•ʔ

204,870 次观看 • 8 个月前

This CSS Backlight Effect is sooooo damn cool! I've taken it a step further with SVG Filters Makes it work with any element - including video!

This CSS Backlight Effect is sooooo damn cool! I've taken it a step further with SVG Filters Makes it work with any element - including video!

Wes Bos

231,832 次观看 • 1 年前

Wowowow epic talk by Chris Feijoo about building liquid glass with SVG and CSS #ReactParis He has an entire post about it!

Wowowow epic talk by Chris Feijoo about building liquid glass with SVG and CSS #ReactParis He has an entire post about it!

Una 🇺🇦

34,980 次观看 • 2 个月前