正在加载视频...

视频加载失败

返回首页

#CSS sibling-index() and sibling-count() available Chrome Canary with experiments enabled! easily stagger effects like: `transition-delay: calc(sibling-index() * .1s);` more info and a Codepen to fork ⤷

argyleink's profile picture

Adam Argyle

57,668 subscribers

22,444 次观看 • 1 年前 •via X (Twitter)

科学技术#CSS
LIVE

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

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

相关视频

soon you won't need inline custom properties to create staggered motion delays in CSS ✨ .char { transition-delay: calc( sin( ((sibling-index() - 1) / sibling-count()) * 45deg) * 0.5s ); }
0:18

soon you won't need inline custom properties to create staggered motion delays in CSS ✨ .char { transition-delay: calc( sin( ((sibling-index() - 1) / sibling-count()) * 45deg) * 0.5s ); }

jhey ʕ•ᴥ•ʔ

120,918 次观看 • 1 年前

CSS Tip! ⚡️ You could use CSS trig functions to calculate animation-delay 🤓 Using them here with custom props for this DNA strand! 👩‍🔬 .node { animation-delay: calc( sin((var(--index) / var(--total)) * 45deg) 👈 * var(--speed) * -1s ); } CodePen.IO link below! 👇
0:14

CSS Tip! ⚡️ You could use CSS trig functions to calculate animation-delay 🤓 Using them here with custom props for this DNA strand! 👩‍🔬 .node { animation-delay: calc( sin((var(--index) / var(--total)) * 45deg) 👈 * var(--speed) * -1s ); } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

182,569 次观看 • 3 年前

Use CSS custom properties and the sin() trigonometric function to give each character an eased animation-delay 🤙 .char { animation-delay: calc( sin((var(--index) / var(--total)) * 90deg) * var(--duration) ); }
0:17

Use CSS custom properties and the sin() trigonometric function to give each character an eased animation-delay 🤙 .char { animation-delay: calc( sin((var(--index) / var(--total)) * 90deg) * var(--duration) ); }

jhey ʕ•ᴥ•ʔ

280,995 次观看 • 1 年前

Forgot to mention this CSS tip when sharing the :has() calendar 🤦‍♂️ It's a <table> & a snippet like this 👇 tr:has(:checked) ~ tr:has(:hover) .cell:has(~ .cell:hover) Says target the cell in a sibling row that's hovered and has a sibling that is hovered 🤯 You :has() power! 💪
0:15

Forgot to mention this CSS tip when sharing the :has() calendar 🤦‍♂️ It's a <table> & a snippet like this 👇 tr:has(:checked) ~ tr:has(:hover) .cell:has(~ .cell:hover) Says target the cell in a sibling row that's hovered and has a sibling that is hovered 🤯 You :has() power! 💪

jhey ʕ•ᴥ•ʔ

298,144 次观看 • 3 年前

Jiyeon : 👊👊 Namjun : “There’s staff behind you” 🤣🤣 They look like a real sibling with the bickering and teasing🤣
0:12

Jiyeon : 👊👊 Namjun : “There’s staff behind you” 🤣🤣 They look like a real sibling with the bickering and teasing🤣

dya☂️🌧️

44,340 次观看 • 1 个月前

This one CSS property will fix your z-index headache. In CSS, a child element with z-index will overlap with any fixed or floating elements outside its container. Instead of stacking higher and higher values to fix it. Use this instead: .card-container { isolation: isolate; } With that, any elements with z-index inside the container will be contained. If you found this useful, follow for more. ❤️
0:19

This one CSS property will fix your z-index headache. In CSS, a child element with z-index will overlap with any fixed or floating elements outside its container. Instead of stacking higher and higher values to fix it. Use this instead: .card-container { isolation: isolate; } With that, any elements with z-index inside the container will be contained. If you found this useful, follow for more. ❤️

Ali

16,738 次观看 • 2 个月前

I'm going to guess this was a sister that was tagging along and her sibling got fed up with that smirking attitude, and we benefit with a little hair pulling
0:15

I'm going to guess this was a sister that was tagging along and her sibling got fed up with that smirking attitude, and we benefit with a little hair pulling

hairpull_fan

48,691 次观看 • 9 个月前

Nothing like sibling love ❤️ Madison Keys gave her towel to a fan, who handed it to his sister, and she gave it right back 🥹 #RolandGarros
0:13

Nothing like sibling love ❤️ Madison Keys gave her towel to a fan, who handed it to his sister, and she gave it right back 🥹 #RolandGarros

TNT Sports U.S.

300,686 次观看 • 1 个月前

this moment from the patreon november preshow is KILLING me theyre literal twins!! and jeremy doing it a second time to fuck with her is such a sibling move
0:10

this moment from the patreon november preshow is KILLING me theyre literal twins!! and jeremy doing it a second time to fuck with her is such a sibling move

angel (he/they) 🦇🪓

81,650 次观看 • 5 个月前

004/100 Buttons. A bit of the process on building an animation. When looking at a finished animation or in this example a finished button, it can look quite complex inside the CSS. But when building it, it’s more like a lot of simple steps, one after another. Here I had the idea to make some kind of text animation like the footer logo on the Osmo site. I try to add the base animation with no complex easing, for example transition: translate 0.4s ease. Starting with just moving the one text from bottom to top and the other text to top. Adding a stagger, play around with it. Searching for a way to make it more circular. On the research I found the sin() function inside CSS which can build a more smooth non linear curve for the stagger which creates this circular effect. And step by step adding more complexity like, different easing for hover/hover-out, opacity, 3D transform and more. I use also the sin() function to rotate the letters, so the middle ones are getting more rotated than the outer ones. Another thing which helps is to add a small delay on hover, for example 0.05s or 0.1s, you don’t really see the difference, but when you hover pretty fast on and out it doesn’t get that jumpy. I’m using here GSAP’s SplitText to split every char into spans. And then I’m adding a CSS index variable to every span, starting from the center. SplitText can provide CSS index variables, but you cannot tell it from which direction. For the sin() it’s also important to have a max length, so I add another CSS variable with the max char number on it. Crafting 100 Buttons with Osmo ⏳ Total time: 63h
0:17

004/100 Buttons. A bit of the process on building an animation. When looking at a finished animation or in this example a finished button, it can look quite complex inside the CSS. But when building it, it’s more like a lot of simple steps, one after another. Here I had the idea to make some kind of text animation like the footer logo on the Osmo site. I try to add the base animation with no complex easing, for example transition: translate 0.4s ease. Starting with just moving the one text from bottom to top and the other text to top. Adding a stagger, play around with it. Searching for a way to make it more circular. On the research I found the sin() function inside CSS which can build a more smooth non linear curve for the stagger which creates this circular effect. And step by step adding more complexity like, different easing for hover/hover-out, opacity, 3D transform and more. I use also the sin() function to rotate the letters, so the middle ones are getting more rotated than the outer ones. Another thing which helps is to add a small delay on hover, for example 0.05s or 0.1s, you don’t really see the difference, but when you hover pretty fast on and out it doesn’t get that jumpy. I’m using here GSAP’s SplitText to split every char into spans. And then I’m adding a CSS index variable to every span, starting from the center. SplitText can provide CSS index variables, but you cannot tell it from which direction. For the sin() it’s also important to have a max length, so I add another CSS variable with the max char number on it. Crafting 100 Buttons with Osmo ⏳ Total time: 63h

Eduard Bodak

166,023 次观看 • 2 个月前

Victor Ma literally said he wanted Zhao Lusi to be his little sister after filming Hidden Love because he didn’t have one. They really formed a sibling bond on set and are still hanging out like family to this day!
0:14

Victor Ma literally said he wanted Zhao Lusi to be his little sister after filming Hidden Love because he didn’t have one. They really formed a sibling bond on set and are still hanging out like family to this day!

anne

62,847 次观看 • 6 个月前

Jisoo is just so funny, the way she was telling Jinyoung that Doyoung prepared a pretty meal for her and his is just the leftovers of hers, Doyoung was stressed and Jisoo was teasing him with “Doyoung is going to cry”, this is so sibling-like 😭😭
0:11

Jisoo is just so funny, the way she was telling Jinyoung that Doyoung prepared a pretty meal for her and his is just the leftovers of hers, Doyoung was stressed and Jisoo was teasing him with “Doyoung is going to cry”, this is so sibling-like 😭😭

🖤

63,695 次观看 • 7 个月前

Just started the story and this simple moment where we walk with our sibling already makes me think this patch will be one of the best we've gotten so far. It's little things like this that add a sense of realism to the moment
0:10

Just started the story and this simple moment where we walk with our sibling already makes me think this patch will be one of the best we've gotten so far. It's little things like this that add a sense of realism to the moment

BLACC

80,386 次观看 • 5 个月前

Heave ho, let's go! This look like you and your sibling fighting over the last bagel bite? The Colossal dire wolves got into a little game of tug of war when learning how to skin and share a whole deer. You think they liked it?
0:19

Heave ho, let's go! This look like you and your sibling fighting over the last bagel bite? The Colossal dire wolves got into a little game of tug of war when learning how to skin and share a whole deer. You think they liked it?

Colossal Biosciences®

23,055 次观看 • 6 天前

You can now pay for things in Africa directly from your AI agent. Today we’re introducing Paystack Index, the easiest way to check out with Paystack merchants through Claude, ChatGPT, OpenClaw, and any AI agent. At launch, you can: → Buy airtime: “Buy ₦500 MTN airtime for 080…” → Send money with Zap ⚡️: “Send ₦25k to…” → Buy food with @ChowdeckHQ: “Order jollof under ₦3k near me” As more merchants join the Index, you’ll be able to do more, from booking rides and ordering groceries to paying utility bills, quickly and securely. Paystack Index is now available in Nigeria, with more African markets coming soon. An experimental product from Paystack and TSG Labs.
0:13

You can now pay for things in Africa directly from your AI agent. Today we’re introducing Paystack Index, the easiest way to check out with Paystack merchants through Claude, ChatGPT, OpenClaw, and any AI agent. At launch, you can: → Buy airtime: “Buy ₦500 MTN airtime for 080…” → Send money with Zap ⚡️: “Send ₦25k to…” → Buy food with @ChowdeckHQ: “Order jollof under ₦3k near me” As more merchants join the Index, you’ll be able to do more, from booking rides and ordering groceries to paying utility bills, quickly and securely. Paystack Index is now available in Nigeria, with more African markets coming soon. An experimental product from Paystack and TSG Labs.

shollsman

520,467 次观看 • 22 天前

Look at him in the snow this weekend in Montana with his new sibling. His family have a huge back yard and he seems to absolutely adore the snow. It’s a long way from the jungle Mr Fox 🦊 has come (2/3)
0:16

Look at him in the snow this weekend in Montana with his new sibling. His family have a huge back yard and he seems to absolutely adore the snow. It’s a long way from the jungle Mr Fox 🦊 has come (2/3)

Niall Harbison

77,773 次观看 • 1 年前

Bottle calf. This is the bottle babe twin that we pulled this weekend. Cow had moved on w sibling and left this one alone. We pulled him after 10 hrs just to see if anyone came back for him. Strong healthy calf. Easily the best learning calf ever to take the bottle. He’s a champ
0:19

Bottle calf. This is the bottle babe twin that we pulled this weekend. Cow had moved on w sibling and left this one alone. We pulled him after 10 hrs just to see if anyone came back for him. Strong healthy calf. Easily the best learning calf ever to take the bottle. He’s a champ

Clay scott

16,319 次观看 • 1 个月前

Two years since I lost my best friend and other half :( I’m just spending today focussing on how deeply I loved him and how grateful I am that I got 21 years with the best brother anyone could have instead of a lifetime with a sibling Im indifferent to. I’ll miss you forever, W❤️
0:19

Two years since I lost my best friend and other half :( I’m just spending today focussing on how deeply I loved him and how grateful I am that I got 21 years with the best brother anyone could have instead of a lifetime with a sibling Im indifferent to. I’ll miss you forever, W❤️

Ava

24,109 次观看 • 1 年前

A viral video featuring a brother and sister has sparked intense debate across social media. 😳👀 Some viewers believe it’s nothing more than harmless sibling fun, while others argue that certain boundaries should always be respected. 💔 The clip has left people divided online, with opinions pouring in from both sides.
0:13

A viral video featuring a brother and sister has sparked intense debate across social media. 😳👀 Some viewers believe it’s nothing more than harmless sibling fun, while others argue that certain boundaries should always be respected. 💔 The clip has left people divided online, with opinions pouring in from both sides.

Kush_zw

20,012 次观看 • 1 个月前