正在加载视频...

视频加载失败

返回首页

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.

chriscoyier's profile picture

Chris Coyier

231,182 subscribers

830,454 次观看 • 3 年前 •via X (Twitter)

科学技术教育
LIVE

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

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

相关视频

Create toolbar navigation with CSS, HTML and JavaScript 🚀 Code in the comments 👨‍💻
0:11

Create toolbar navigation with CSS, HTML and JavaScript 🚀 Code in the comments 👨‍💻

David Mráz

191,041 次观看 • 2 年前

🚀 Introducing Blendy – a framework-agnostic tool that smoothly transitions any element into any other element with just a few lines of code.
0:10

🚀 Introducing Blendy – a framework-agnostic tool that smoothly transitions any element into any other element with just a few lines of code.

Taha Shashtari

79,135 次观看 • 1 年前

🤯 Look at this insane parallax effect on the website. With just a few clicks in @Framer, you can make this too. 100 retweets and I'll show you how.
0:10

🤯 Look at this insane parallax effect on the website. With just a few clicks in @Framer, you can make this too. 100 retweets and I'll show you how.

Framer University

222,120 次观看 • 3 年前

You can make elements smoothly animate between pages with just two lines of CSS. No JavaScript needed. Here's how 👇
0:13

You can make elements smoothly animate between pages with just two lines of CSS. No JavaScript needed. Here's how 👇

Victor

22,216 次观看 • 1 个月前

Andy Pages made the first 5-star catch of the season last night, just a 5% catch probability on this one according to Statcast! Pages covered 93 feet in 4.9 seconds with the sliding grab. Add a big homer to his +1.2 OAA and Pages is off to a great start!
0:12

Andy Pages made the first 5-star catch of the season last night, just a 5% catch probability on this one according to Statcast! Pages covered 93 feet in 4.9 seconds with the sliding grab. Add a big homer to his +1.2 OAA and Pages is off to a great start!

The WARmonger

204,545 次观看 • 2 个月前

I just build & deployed this multi-page Astro website. It includes lifelike content, looks great, and even has some subtle view transitions between pages! with bolt․new it took me 20 minutes 🤯 Some thoughts/highlights in 🧵:
0:15

I just build & deployed this multi-page Astro website. It includes lifelike content, looks great, and even has some subtle view transitions between pages! with bolt․new it took me 20 minutes 🤯 Some thoughts/highlights in 🧵:

Tomek Sułkowski

10,993 次观看 • 1 年前

Create this password validator with HTML, CSS and JavaScript 🚀 Code in the comments 👨‍💻
0:10

Create this password validator with HTML, CSS and JavaScript 🚀 Code in the comments 👨‍💻

David Mráz

13,836 次观看 • 10 个月前

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

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

Benjamin De Cock

137,831 次观看 • 2 个月前

Gemini 3 pro can create really amazing landing pages with copy that just makes sense. Frontend development is going to look so much different in a few days with Gemini 3.
0:18

Gemini 3 pro can create really amazing landing pages with copy that just makes sense. Frontend development is going to look so much different in a few days with Gemini 3.

Shubham Saboo

89,397 次观看 • 6 个月前

I built a website where you can browse the #threejs shaders code by expanding the <includes> in place. It gives a better understanding of what the code is doing without having to open each file individually. #glsl #WebGL
0:12

I built a website where you can browse the #threejs shaders code by expanding the <includes> in place. It gives a better understanding of what the code is doing without having to open each file individually. #glsl #WebGL

grgrdvrt

23,573 次观看 • 1 年前

Create this sign up screen with HTML, CSS and JavaScript 👨‍💻🚀 Code in the comments 👇
0:10

Create this sign up screen with HTML, CSS and JavaScript 👨‍💻🚀 Code in the comments 👇

David Mráz

63,563 次观看 • 2 年前

What if *any* website could be turned into a canvas with a single click? Rebuilt my website ( last night and added DOM<->Canvas translation allowing you to "break out" into a multiplayer tldraw canvas at any point. The Regular web, zero magic. 1/n
0:19

What if *any* website could be turned into a canvas with a single click? Rebuilt my website ( last night and added DOM<->Canvas translation allowing you to "break out" into a multiplayer tldraw canvas at any point. The Regular web, zero magic. 1/n

Orion Reed

42,335 次观看 • 2 年前

This is insane. I can't believe it's this easy to create a website with forms, CMS, blogposts, design, automation... In just 5 minutes. No code. No templates. Just a chat. This isn’t Webflow. It’s not Wix. It’s something new — 👇
0:16

This is insane. I can't believe it's this easy to create a website with forms, CMS, blogposts, design, automation... In just 5 minutes. No code. No templates. Just a chat. This isn’t Webflow. It’s not Wix. It’s something new — 👇

Tulsi Soni

55,892 次观看 • 1 年前

Responsive profile UI with animated tabs with HTML, CSS and JavaScript 🚀 Code in the comments 👨‍💻
0:13

Responsive profile UI with animated tabs with HTML, CSS and JavaScript 🚀 Code in the comments 👨‍💻

David Mráz

14,508 次观看 • 10 个月前

This is wild. MagicPath AI just brought the Cursor moment to UI design No Figma skills needed, pure AI magic. 🤯 10 wild examples + prompts: 1. A modern educational website with 3D elements and intuitive navigation.
0:10

This is wild. MagicPath AI just brought the Cursor moment to UI design No Figma skills needed, pure AI magic. 🤯 10 wild examples + prompts: 1. A modern educational website with 3D elements and intuitive navigation.

Min Choi

228,140 次观看 • 1 年前

Exploring a little effort with claude and this what it generates. No design tool used, no code harm, just few lines of prompt and here the result
0:10

Exploring a little effort with claude and this what it generates. No design tool used, no code harm, just few lines of prompt and here the result

Basit A. Khan

78,272 次观看 • 1 个月前

CSS is mind-blowing 🤯 Browser does what it can to keep the menus in view. Even when you scroll. Zero JavaScript (Aside from the Draggable part) This is the important HTML 👇 (anchor) <button id="trigger" popovertarget="menu"> <div popover="auto" id="menu" anchor="trigger">
0:19

CSS is mind-blowing 🤯 Browser does what it can to keep the menus in view. Even when you scroll. Zero JavaScript (Aside from the Draggable part) This is the important HTML 👇 (anchor) <button id="trigger" popovertarget="menu"> <div popover="auto" id="menu" anchor="trigger">

jhey ʕ•ᴥ•ʔ

307,232 次观看 • 2 年前

GM C4Eians! ⚡️ We’ve got great news to kick off the weekend: our C4E website has just been updated. Expect a cleaner look, smoother navigation, and a few surprises waiting inside 👀 Check it out now:
0:18

GM C4Eians! ⚡️ We’ve got great news to kick off the weekend: our C4E website has just been updated. Expect a cleaner look, smoother navigation, and a few surprises waiting inside 👀 Check it out now:

C4E

15,850 次观看 • 4 个月前

One-shot "Video to code" result from Kimi K2.5 It not only clones a website, but also all the visual interactions and UX designs. No need to describe it in detail, all you need to do is take a screen recording and ask Kimi: "Clone this website with all the UX designs."
0:19

One-shot "Video to code" result from Kimi K2.5 It not only clones a website, but also all the visual interactions and UX designs. No need to describe it in detail, all you need to do is take a screen recording and ask Kimi: "Clone this website with all the UX designs."

Kimi Product

518,030 次观看 • 4 个月前