正在加载视频...

视频加载失败

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

you can create a CSS only carousel with CSS `𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚗𝚊𝚙` .𝚜𝚌𝚛𝚘𝚕𝚕𝚎𝚛 { 𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠-𝚡: 𝚊𝚞𝚝𝚘; 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚗𝚊𝚙-𝚝𝚢𝚙𝚎: 𝚡 𝚖𝚊𝚗𝚍𝚊𝚝𝚘𝚛𝚢; 𝚜𝚌𝚛𝚘𝚕𝚕-𝚙𝚊𝚍𝚍𝚒𝚗𝚐-𝚒𝚗𝚕𝚒𝚗𝚎: 𝟷.𝟻𝚛𝚎𝚖; /* 𝚖𝚊𝚝𝚌𝚑𝚎𝚜 𝚢𝚘𝚞𝚛 𝚜𝚌𝚛𝚘𝚕𝚕-𝚙𝚕/𝚙𝚛 */ } .𝚌𝚊𝚛𝚍 { 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚗𝚊𝚙-𝚊𝚕𝚒𝚐𝚗: 𝚌𝚎𝚗𝚝𝚎𝚛; 𝚏𝚕𝚎𝚡-𝚜𝚑𝚛𝚒𝚗𝚔: 𝟶; } When you scroll, it snaps exactly in the center of the card Super fun to use, easy... show more

Manu Arora

42,039 subscribers

55,350 次观看 • 2 个月前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

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

相关视频

you can create a sticky navbar that morphs when you scroll with pure CSS, no JS or animation libraries required 𝚑𝚎𝚊𝚍𝚎𝚛 { 𝚌𝚘𝚗𝚝𝚊𝚒𝚗𝚎𝚛-𝚝𝚢𝚙𝚎: 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚝𝚊𝚝𝚎; 𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗: 𝚜𝚝𝚒𝚌𝚔𝚢; 𝚝𝚘𝚙: 𝟶; } @𝚌𝚘𝚗𝚝𝚊𝚒𝚗𝚎𝚛 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚝𝚊𝚝𝚎(𝚜𝚝𝚞𝚌𝚔: 𝚝𝚘𝚙) { .𝚗𝚊𝚟-𝚋𝚊𝚛 { 𝚖𝚊𝚡-𝚠𝚒𝚍𝚝𝚑: 𝟻𝟼𝚛𝚎𝚖; 𝚋𝚘𝚛𝚍𝚎𝚛-𝚛𝚊𝚍𝚒𝚞𝚜: 𝟶.𝟽𝟻𝚛𝚎𝚖; 𝚋𝚊𝚌𝚔𝚐𝚛𝚘𝚞𝚗𝚍: 𝚛𝚐𝚋(𝟸𝟻𝟻 𝟸𝟻𝟻 𝟸𝟻𝟻 / 𝟶.𝟿𝟸); } } the browser now knows when a sticky element is stuck, all triggered by one container query available only in chromium browsers only, no firefox or safari which is a shame

you can create a sticky navbar that morphs when you scroll with pure CSS, no JS or animation libraries required 𝚑𝚎𝚊𝚍𝚎𝚛 { 𝚌𝚘𝚗𝚝𝚊𝚒𝚗𝚎𝚛-𝚝𝚢𝚙𝚎: 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚝𝚊𝚝𝚎; 𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗: 𝚜𝚝𝚒𝚌𝚔𝚢; 𝚝𝚘𝚙: 𝟶; } @𝚌𝚘𝚗𝚝𝚊𝚒𝚗𝚎𝚛 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚝𝚊𝚝𝚎(𝚜𝚝𝚞𝚌𝚔: 𝚝𝚘𝚙) { .𝚗𝚊𝚟-𝚋𝚊𝚛 { 𝚖𝚊𝚡-𝚠𝚒𝚍𝚝𝚑: 𝟻𝟼𝚛𝚎𝚖; 𝚋𝚘𝚛𝚍𝚎𝚛-𝚛𝚊𝚍𝚒𝚞𝚜: 𝟶.𝟽𝟻𝚛𝚎𝚖; 𝚋𝚊𝚌𝚔𝚐𝚛𝚘𝚞𝚗𝚍: 𝚛𝚐𝚋(𝟸𝟻𝟻 𝟸𝟻𝟻 𝟸𝟻𝟻 / 𝟶.𝟿𝟸); } } the browser now knows when a sticky element is stuck, all triggered by one container query available only in chromium browsers only, no firefox or safari which is a shame

Manu Arora

109,040 次观看 • 14 天前

You can pin a chat scroller to the bottom with CSS 𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠-𝚊𝚗𝚌𝚑𝚘𝚛, without having to use MutationObserver or 𝚜𝚌𝚛𝚘𝚕𝚕𝚃𝚘() functions ... ... #𝚜𝚌𝚛𝚘𝚕𝚕𝚎𝚛 * { 𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠-𝚊𝚗𝚌𝚑𝚘𝚛: 𝚗𝚘𝚗𝚎; } #𝚊𝚗𝚌𝚑𝚘𝚛 { 𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠-𝚊𝚗𝚌𝚑𝚘𝚛: 𝚊𝚞𝚝𝚘; 𝚑𝚎𝚒𝚐𝚑𝚝: 𝟷𝚙𝚡; } Browsers run scroll anchoring by default to prevent layout shifts Disable it on children, re-enable it on a 1px anchor at the end and the scroll follows new content down on its own

You can pin a chat scroller to the bottom with CSS 𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠-𝚊𝚗𝚌𝚑𝚘𝚛, without having to use MutationObserver or 𝚜𝚌𝚛𝚘𝚕𝚕𝚃𝚘() functions ... ... #𝚜𝚌𝚛𝚘𝚕𝚕𝚎𝚛 * { 𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠-𝚊𝚗𝚌𝚑𝚘𝚛: 𝚗𝚘𝚗𝚎; } #𝚊𝚗𝚌𝚑𝚘𝚛 { 𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠-𝚊𝚗𝚌𝚑𝚘𝚛: 𝚊𝚞𝚝𝚘; 𝚑𝚎𝚒𝚐𝚑𝚝: 𝟷𝚙𝚡; } Browsers run scroll anchoring by default to prevent layout shifts Disable it on children, re-enable it on a 1px anchor at the end and the scroll follows new content down on its own

Manu Arora

65,637 次观看 • 1 个月前

Tailwind CSS Tip ✨ You can create a pure css carousel in Tailwind CSS using scroll snap. Live demo ↓ (21/30) follow for 9 more tips 🔔

Tailwind CSS Tip ✨ You can create a pure css carousel in Tailwind CSS using scroll snap. Live demo ↓ (21/30) follow for 9 more tips 🔔

Surjith S M ✪

203,341 次观看 • 3 年前

wavy carousel with CSS scroll driven animations not exactly like OP but fun to try replicate

wavy carousel with CSS scroll driven animations not exactly like OP but fun to try replicate

Wes Bos

71,512 次观看 • 5 个月前

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!

CSS by T. Afif

57,769 次观看 • 8 个月前

No JavaScript needed 2 lines of CSS to create a swipe animation ✨

No JavaScript needed 2 lines of CSS to create a swipe animation ✨

andrej

459,097 次观看 • 2 年前

Skewed infinite carousel w/ vignette effect ✨ Built entirely with Tailwind CSS – zero JavaScript required. Live demo & code 👇

Skewed infinite carousel w/ vignette effect ✨ Built entirely with Tailwind CSS – zero JavaScript required. Live demo & code 👇

Steven Tey

472,614 次观看 • 2 年前

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

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

David Mráz

191,041 次观看 • 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 次观看 • 8 个月前

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

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

David Mráz

13,836 次观看 • 10 个月前

You can enable scroll snapping with CSS scroll-snap-type and scroll-snap-align 🚀

You can enable scroll snapping with CSS scroll-snap-type and scroll-snap-align 🚀

David Mráz

22,233 次观看 • 1 年前

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

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

Victor

22,216 次观看 • 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.

💡 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 年前

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

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

David Mráz

63,563 次观看 • 2 年前

📝 Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up By adding a long transition-delay to a CSS property under certain conditions (with a Style Query), you can persist its value Demo by Fabrizio Calderan

📝 Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up By adding a long transition-delay to a CSS property under certain conditions (with a Style Query), you can persist its value Demo by Fabrizio Calderan

Bram.us (by @bramus)

15,617 次观看 • 1 年前

Create this sidebar using HTML, CSS and JavaScript 🚀 Code in the comments 👨‍💻

Create this sidebar using HTML, CSS and JavaScript 🚀 Code in the comments 👨‍💻

David Mráz

65,912 次观看 • 1 年前

Create file upload dropzone using HTML, CSS and JavaScript 🚀 Code in the comments 👨‍💻

Create file upload dropzone using HTML, CSS and JavaScript 🚀 Code in the comments 👨‍💻

David Mráz

89,770 次观看 • 2 年前

Tailwind Tweak #6 Learn how to do custom form validation with Tailwind CSS, no JavaScript required. 🪄 Code: Don't forget to follow for daily tweaks!🫶🏻

Tailwind Tweak #6 Learn how to do custom form validation with Tailwind CSS, no JavaScript required. 🪄 Code: Don't forget to follow for daily tweaks!🫶🏻

Namya @ Supafast

57,314 次观看 • 3 年前

a pixelating logo carousel made with css

ty

62,248 次观看 • 2 个月前