正在加载视频...
视频加载失败
CSS Tip! 🤙 You can create this magnetic :hover effect with CSS anchor positioning, :has, and zero JS 🔥 article { anchor-name: --develop; } ul:has(li:hover) { --anchor: --develop; } ul::after { inset: anchor(var(--anchor) top) anchor(var(--anchor) right) ... ; } How do you keep it clean when entering/exiting the list?... show more
10 条评论

Here's that @CodePen link! 🚀 Should get something good in all browsers 🫶 That's the joy of progressive enhancement!

Fun fact: Transitioning CSS anchor positioning wasn't going to work 🥲 But, some early demos I put together for you helped change that 🙏 The transitioning regressed in a Chome Canary update and those "fun" demos helped solve it 🔥

When CSS anchor-default shipped in Canary, another fun demo idea prompted whether we could use that to transition anchors 🤔 And that raised another Chromium issue 👇 The gist of the story is: "Building all sorts of different things helps the platform"

And this was the demo that prompted that whole CSS exploration in the first place 😅 Jus' wanted to make a bear paw move between the inputs because you can ʕノ•ᴥ•ʔノ ︵ ┻━┻

🔥

Any ideas how to accomplish this

How do you want it to work? On scroll? On click? Can definitely throw something together for you 🤙

Made something like that using svelte.

Have you seen the one @KevinJPowell did where you can see the gutters on the grid? Pretty sick

@KevinJPowell Not sure I have. Someone tagged me in the quoted post and it reminded me of transitioning anchor position And that reminded me of an issue I raised from working with the spec last year 🤓
