正在加载视频...

视频加载失败

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

CSS view transitions + anchor positioning now let you easily build smooth SPA-like navigation on a good old static website!

Benjamin De Cock

24,527 subscribers

138,098 次观看 • 3 个月前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

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

相关视频

Build Flow Charts with #CSS Anchor Positioning

Build Flow Charts with #CSS Anchor Positioning

Cory Rylan

28,522 次观看 • 2 年前

In case you missed it, I wrote about the basics CSS Anchor Positioning. 🔗

In case you missed it, I wrote about the basics CSS Anchor Positioning. 🔗

Ahmad Shadeed

38,739 次观看 • 10 个月前

Responsive magnetic link effect using CSS anchor positioning 🧲 nav li:nth-of-type(2) { anchor-name: --i2; } nav:has(li:nth-of-type(2) a:hover) { --a: --i2; } ul::before { /* indicator */ left: anchor(var(--a) left); width: anchor-size(var(--a) width); }

Responsive magnetic link effect using CSS anchor positioning 🧲 nav li:nth-of-type(2) { anchor-name: --i2; } nav:has(li:nth-of-type(2) a:hover) { --a: --i2; } ul::before { /* indicator */ left: anchor(var(--a) left); width: anchor-size(var(--a) width); }

jhey ʕ•ᴥ•ʔ

396,107 次观看 • 2 年前

A fun CSS-only experimentation using modern features (anchor positioning, @property, :has(), and more!) for this week #codepenchallenge Demo: via CodePen.IO

A fun CSS-only experimentation using modern features (anchor positioning, @property, :has(), and more!) for this week #codepenchallenge Demo: via CodePen.IO

CSS by T. Afif

12,042 次观看 • 1 年前

progressive css-only pagination indicators w/ anchor positioning 👨‍🍳 nav::before { position-anchor: --h; } nav::before { left: anchor(left); } a:hover { anchor-name: --h; } use the nav pseudoelements, ::before for intent, ::after for current 🤙

progressive css-only pagination indicators w/ anchor positioning 👨‍🍳 nav::before { position-anchor: --h; } nav::before { left: anchor(left); } a:hover { anchor-name: --h; } use the nav pseudoelements, ::before for intent, ::after for current 🤙

jhey ʕ•ᴥ•ʔ

192,456 次观看 • 8 个月前

LOOK. This is just a regular ol' website. No JavaScript whatsoever. Navigation pages with clicks <a> links to other HTML pages. The most basic website in the world. Yet, with a few lines of code to activate View Transitions, KAPOW.

LOOK. This is just a regular ol' website. No JavaScript whatsoever. Navigation pages with clicks <a> links to other HTML pages. The most basic website in the world. Yet, with a few lines of code to activate View Transitions, KAPOW.

Chris Coyier

830,480 次观看 • 3 年前

💡 CSS Tip! Two circles, one arrow, and CSS magic. 🪄 A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩 The shape and position of the arrow are fully controlled using CSS.

💡 CSS Tip! Two circles, one arrow, and CSS magic. 🪄 A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩 The shape and position of the arrow are fully controlled using CSS.

CSS by T. Afif

82,668 次观看 • 6 个月前

Added new transitions to There are now 21 transitions you can copy as CSS or React code or use as a skill for Claude, Cursor or Codex npx skills add jakubantalik/transitions.dev

Added new transitions to There are now 21 transitions you can copy as CSS or React code or use as a skill for Claude, Cursor or Codex npx skills add jakubantalik/transitions.dev

Jakub Antalik

209,940 次观看 • 12 天前

Rockstar's website team cooked on these transitions, these are so Apple like!

Rockstar's website team cooked on these transitions, these are so Apple like!

ben

831,004 次观看 • 1 年前

Those new navigation transitions in #SwiftUI are interesting. Only .zoom is available for now.

Those new navigation transitions in #SwiftUI are interesting. Only .zoom is available for now.

Thomas Ricouard

39,930 次观看 • 2 年前

Pretty amazing that we can now implement swipeable Tabs with native CSS. Updating the React Aria demo I made a few years ago to use native scroll snapping, scroll timeline, and anchor positioning instead of Framer Motion. Feels smooooooth! 🎉

Pretty amazing that we can now implement swipeable Tabs with native CSS. Updating the React Aria demo I made a few years ago to use native scroll snapping, scroll timeline, and anchor positioning instead of Framer Motion. Feels smooooooth! 🎉

Devon Govett

83,922 次观看 • 9 个月前

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

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

Ali

13,084 次观看 • 1 个月前

Gittens is also a threat on the transitions. He's rapid and can turn fullbacks easily. A bit like Mudryk. When given large spaces to attack, Gittens can be lethal. Goal against Bayern is a good example from last season.

Gittens is also a threat on the transitions. He's rapid and can turn fullbacks easily. A bit like Mudryk. When given large spaces to attack, Gittens can be lethal. Goal against Bayern is a good example from last season.

Fahd

292,908 次观看 • 1 年前

Nuxt Movies Demo now leverages the browser View Transitions API 🪄 Source code is open source on

Nuxt Movies Demo now leverages the browser View Transitions API 🪄 Source code is open source on

Nuxt

383,134 次观看 • 3 年前

Just submitted a new @Figma plugin that lets you blend two shapes to create smooth transitions.

Just submitted a new @Figma plugin that lets you blend two shapes to create smooth transitions.

Joshua Guo

58,408 次观看 • 1 年前

Did u know? U can now follow a website directly on Follow! 👀 If you’re a css hacker 🧙‍♂️ or have a front-end fren, check it out now 😎 TGIFollow

Did u know? U can now follow a website directly on Follow! 👀 If you’re a css hacker 🧙‍♂️ or have a front-end fren, check it out now 😎 TGIFollow

Folo

12,265 次观看 • 1 年前

Do you know about the filter property in CSS? Among many other awesome options, it allows you to easily add a black and white effect on images.

Do you know about the filter property in CSS? Among many other awesome options, it allows you to easily add a black and white effect on images.

andrej

160,869 次观看 • 3 年前

A very smooth interactive map on the Ramp website →

A very smooth interactive map on the Ramp website →

Jim Raptis

14,513 次观看 • 3 个月前

Chrome 147 is officially rolling out to users everywhere → This release includes element-scoped view transitions, empowering you to run concurrent transitions on separate HTML elements.

Chrome 147 is officially rolling out to users everywhere → This release includes element-scoped view transitions, empowering you to run concurrent transitions on separate HTML elements.

Chrome for Developers

73,272 次观看 • 2 个月前