正在加载视频...

视频加载失败

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

your signature is a custom easing function™ ✒️ draw it map the motion to css linear() timing function package as portable SVG paste anywhere 👇

jhey ʕ•ᴥ•ʔ

146,397 subscribers

170,790 次观看 • 3 个月前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

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

相关视频

View Transitions with CSS linear() to create a light flicker effect on theme change 💡 [data-theme='light']::view-transition-group(root) { animation-timing-function: var(--flicker); } jus' set a custom timing function on the default animation 👨‍🍳 bonus: drag switch ✨

View Transitions with CSS linear() to create a light flicker effect on theme change 💡 [data-theme='light']::view-transition-group(root) { animation-timing-function: var(--flicker); } jus' set a custom timing function on the default animation 👨‍🍳 bonus: drag switch ✨

jhey ʕ•ᴥ•ʔ

113,536 次观看 • 10 个月前

Hand-drawn signature, built with Motion ⊙ SVG paths w/ sequential timing + custom easing ⊙ Each stroke drawn using 𝚙𝚊𝚝𝚑𝙻𝚎𝚗𝚐𝚝𝚑 animation ⊙ Ghost layer underneath gives an ink-indent effect A personal touch that elevates your portfolio. Source code below. ⤵️

Hand-drawn signature, built with Motion ⊙ SVG paths w/ sequential timing + custom easing ⊙ Each stroke drawn using 𝚙𝚊𝚝𝚑𝙻𝚎𝚗𝚐𝚝𝚑 animation ⊙ Ghost layer underneath gives an ink-indent effect A personal touch that elevates your portfolio. Source code below. ⤵️

kian bazza

246,103 次观看 • 6 个月前

Excited to announce Easing Wizard is now live! 🎉 The ultimate CSS easing editor with support for Bézier, spring, bounce, wiggle, and overshoot! 🚀 🔗 Some key features are: ⚡ Uses linear timing function instead of keyframes 🎢 Multiple curve types ⏸️ Pause between animation previews 🎥 10 preview modes 📚 Large collection of presets 📝 CSS and Tailwind CSS code generation 📊 Linear comparison 🎯 Multiple accuracy levels ➕ Optional extra space for Bézier curves And can you find the hidden easter egg?

Excited to announce Easing Wizard is now live! 🎉 The ultimate CSS easing editor with support for Bézier, spring, bounce, wiggle, and overshoot! 🚀 🔗 Some key features are: ⚡ Uses linear timing function instead of keyframes 🎢 Multiple curve types ⏸️ Pause between animation previews 🎥 10 preview modes 📚 Large collection of presets 📝 CSS and Tailwind CSS code generation 📊 Linear comparison 🎯 Multiple accuracy levels ➕ Optional extra space for Bézier curves And can you find the hidden easter egg?

Matthias Martin

13,307 次观看 • 1 年前

make it pop™ 🎈 CSS linear() is one of my favorite sleeper additions to the platform 💯

make it pop™ 🎈 CSS linear() is one of my favorite sleeper additions to the platform 💯

jhey ʕ•ᴥ•ʔ

124,142 次观看 • 2 年前

easing is everything use different CSS timing functions per axis for custom motion paths 👨‍🍳 .p { animation: x .8s var(--x-time), y .8s var(--y-time); animation-composition: accumulate; } @keyframes x { to { translate: var(--x) 0 } @keyframes y { to { translate: 0 var(--y) }

easing is everything use different CSS timing functions per axis for custom motion paths 👨‍🍳 .p { animation: x .8s var(--x-time), y .8s var(--y-time); animation-composition: accumulate; } @keyframes x { to { translate: var(--x) 0 } @keyframes y { to { translate: 0 var(--y) }

jhey ʕ•ᴥ•ʔ

271,665 次观看 • 10 个月前

It is your destiny to function in the supernatural! Do you believe?

It is your destiny to function in the supernatural! Do you believe?

Apostle Emmanuel Iren

26,844 次观看 • 1 年前

with a tiny bit of JavaScript enhancement take that CSS driven slider and give it "that little bounce™" - use pointer-events to calculate an overdrag - map that overdrag to a CSS custom property --stretch - apply style - profit 💀

with a tiny bit of JavaScript enhancement take that CSS driven slider and give it "that little bounce™" - use pointer-events to calculate an overdrag - map that overdrag to a CSS custom property --stretch - apply style - profit 💀

jhey ʕ•ᴥ•ʔ

196,882 次观看 • 1 年前

Now available in the #rstats {mapgl} package: the `compare()` function allows you to swipe between layers on your map! Compare demographic changes, development scenarios, alternative color palettes (shown here) and much more Learn how:

Now available in the #rstats {mapgl} package: the `compare()` function allows you to swipe between layers on your map! Compare demographic changes, development scenarios, alternative color palettes (shown here) and much more Learn how:

Kyle Walker

22,915 次观看 • 2 年前

2. LAMBDA Use a LAMBDA function to create custom, reusable functions and call them by a friendly name. This is a powerful function to create your own calculations. In our case, we wanted to calculate the income after deducting tax. The formula: = LAMBDA(x,y,x*(1-y))

2. LAMBDA Use a LAMBDA function to create custom, reusable functions and call them by a friendly name. This is a powerful function to create your own calculations. In our case, we wanted to calculate the income after deducting tax. The formula: = LAMBDA(x,y,x*(1-y))

Kofi Ntim🇬🇭

11,082 次观看 • 1 年前

I did it! 100 Unique CSS Patterns 🤩 👉 👈 One of the biggest collection of CSS patterns ever! ✅ One-click to copy/paste ✅ One value to control the size ✅ Optimized with CSS variables Which one is your favorite? Tell me in the comments 👇 #CSS

I did it! 100 Unique CSS Patterns 🤩 👉 👈 One of the biggest collection of CSS patterns ever! ✅ One-click to copy/paste ✅ One value to control the size ✅ Optimized with CSS variables Which one is your favorite? Tell me in the comments 👇 #CSS

CSS by T. Afif

29,170 次观看 • 3 年前

CSS Tip! ⭐️ You can use mix-blend-mode with scoped custom properties to create this inverted :hover effect 🤙 button > span { left: calc(var(--x, 0) * 1px); top: calc(var(--y, 0) * 1px); mix-blend-mode: difference; 👈 } The cool trick is that using mix-blend-mode acts like a color inverter which works well with monochromatic controls 😍 Saves defining the :hover colors, etc. It works it out for you! As for how to move that spot around? A teeny bit of JavaScript 🤏 const UPDATE = ({target, x, y }) => { const bounds = target.getBoundingClientRect() target.style.setProperty('--x', x - bounds.left) target.style.setProperty('--y', y - bounds.top) } const BTNS = document.querySelectorAll('button') BTNS.forEach(BTN => BTN.addEventListener('pointermove', UPDATE)) On :hover you can use a scoped custom property to change the size of the spot button:is(:hover, :focus-visible) { --active: 1; } button span { transform: translate(-50%, -50%) scale(calc(var(--active, 0) * 3); transition: transform 0.25s; } But, what about the bouncy easy? You can use linear() where supported to create a bouncy transition ✨ @supports (transition-timing-function: linear(0, 1)) { button:is(:hover, :focus-visible) span { transition-duration: 0.5s; transition-timing-function: linear( 0, 0.5007 7.21%, 0.7803 12.29%, ... ); } } That's it! Thanks for the challenge Alohe 🤙 CodePen.IO link below! 👇

CSS Tip! ⭐️ You can use mix-blend-mode with scoped custom properties to create this inverted :hover effect 🤙 button > span { left: calc(var(--x, 0) * 1px); top: calc(var(--y, 0) * 1px); mix-blend-mode: difference; 👈 } The cool trick is that using mix-blend-mode acts like a color inverter which works well with monochromatic controls 😍 Saves defining the :hover colors, etc. It works it out for you! As for how to move that spot around? A teeny bit of JavaScript 🤏 const UPDATE = ({target, x, y }) => { const bounds = target.getBoundingClientRect() target.style.setProperty('--x', x - bounds.left) target.style.setProperty('--y', y - bounds.top) } const BTNS = document.querySelectorAll('button') BTNS.forEach(BTN => BTN.addEventListener('pointermove', UPDATE)) On :hover you can use a scoped custom property to change the size of the spot button:is(:hover, :focus-visible) { --active: 1; } button span { transform: translate(-50%, -50%) scale(calc(var(--active, 0) * 3); transition: transform 0.25s; } But, what about the bouncy easy? You can use linear() where supported to create a bouncy transition ✨ @supports (transition-timing-function: linear(0, 1)) { button:is(:hover, :focus-visible) span { transition-duration: 0.5s; transition-timing-function: linear( 0, 0.5007 7.21%, 0.7803 12.29%, ... ); } } That's it! Thanks for the challenge Alohe 🤙 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

152,923 次观看 • 2 年前

#WATCH | On Ram Temple Pran Pratishtha ceremony, Congress MP Rahul Gandhi says, "The RSS and the BJP have made the 22nd January function a completely political Narendra Modi function. It's a RSS BJP function and I think that is why the Congress President said that he would not go to the function. We are open to all religions, all practices. Even the authorities of the Hindu religion, the biggest authorities of the Hindu religion have made their view public about what they think about the 22nd January function that it is a political function. So it is difficult for us to go to a political function which is designed around the Prime Minister of India and designed around the RSS..."

#WATCH | On Ram Temple Pran Pratishtha ceremony, Congress MP Rahul Gandhi says, "The RSS and the BJP have made the 22nd January function a completely political Narendra Modi function. It's a RSS BJP function and I think that is why the Congress President said that he would not go to the function. We are open to all religions, all practices. Even the authorities of the Hindu religion, the biggest authorities of the Hindu religion have made their view public about what they think about the 22nd January function that it is a political function. So it is difficult for us to go to a political function which is designed around the Prime Minister of India and designed around the RSS..."

ANI

349,872 次观看 • 2 年前

Always have an SVG goo filter ready to go in your UI toolkit 🎯 .container { filter: url(#goo); } One line of CSS on the container + the SVG filter 🤙 Throw a border on for "Fake 3D" 👀 SVG filter code below 👇

Always have an SVG goo filter ready to go in your UI toolkit 🎯 .container { filter: url(#goo); } One line of CSS on the container + the SVG filter 🤙 Throw a border on for "Fake 3D" 👀 SVG filter code below 👇

jhey ʕ•ᴥ•ʔ

189,799 次观看 • 2 年前

🚨RFK JR: "Your whole industry told the public for years to 'trust the experts.' 'Trust the experts' is not a function of science or democracy, it's a function of totalitarianism and religion."

🚨RFK JR: "Your whole industry told the public for years to 'trust the experts.' 'Trust the experts' is not a function of science or democracy, it's a function of totalitarianism and religion."

Autism Capital 🧩

181,117 次观看 • 1 年前

Live2D tips: Mirror paste features! Do you use the mirror paste function? With this function, you can immediately copy and flip the blendshape parameters for the eyes! Many people think flipping blendshapes is difficult, but I will solve that problem! First, select both eye deformers and copy the eye deformations using [Ctrl+Shift+C]. Select "Paste Form Special" in the Parameters palette. Select the "Warp Deformer" tab and check "Invert coordinates". Next, move the keyframe to the opposite side and paste it using [Ctrl+Shift+Z]. The mirror paste is now complete!!! It's so easy! Voice video🔽🔽🔽 #Live2D

Live2D tips: Mirror paste features! Do you use the mirror paste function? With this function, you can immediately copy and flip the blendshape parameters for the eyes! Many people think flipping blendshapes is difficult, but I will solve that problem! First, select both eye deformers and copy the eye deformations using [Ctrl+Shift+C]. Select "Paste Form Special" in the Parameters palette. Select the "Warp Deformer" tab and check "Invert coordinates". Next, move the keyframe to the opposite side and paste it using [Ctrl+Shift+Z]. The mirror paste is now complete!!! It's so easy! Voice video🔽🔽🔽 #Live2D

Ninta(ニンタ) Art&Live2D (Vgen comm)

12,452 次观看 • 9 个月前

Your iPhone has a dictation button now. Map the Action Button to Monologue, press the side of your phone, and start talking. No app to open. Your transcript is ready to paste when you’re done. Naveen Naidu shows how it works 👇

Your iPhone has a dictation button now. Map the Action Button to Monologue, press the side of your phone, and start talking. No app to open. Your transcript is ready to paste when you’re done. Naveen Naidu shows how it works 👇

Every 🧱

37,774 次观看 • 2 个月前

The 10x programmer/designer is created largely as a function of motivation. The will to see your creation exist. An impatience with turning nothing into something.

The 10x programmer/designer is created largely as a function of motivation. The will to see your creation exist. An impatience with turning nothing into something.

DHH

78,872 次观看 • 1 年前

A New Function of Samsung Galaxy Z Fold7: Smart Collection In fact, it applies to all One UI 8 devices. But this feature is limited to the China version.Because this is a function developed by the China team.But I think it will gradually spread to the global market.

A New Function of Samsung Galaxy Z Fold7: Smart Collection In fact, it applies to all One UI 8 devices. But this feature is limited to the China version.Because this is a function developed by the China team.But I think it will gradually spread to the global market.

Ice Universe

83,947 次观看 • 1 年前

TMC is claiming BJP is using CID to terrorize its MLAs now 🍀 > TMC MLA Nayna Bandyopadhyay, Chowrangee AC, was visiting an Eid function when CID went to her home > It is being alleged that her signature during the oath ceremony was forged as it looked crooked

TMC is claiming BJP is using CID to terrorize its MLAs now 🍀 > TMC MLA Nayna Bandyopadhyay, Chowrangee AC, was visiting an Eid function when CID went to her home > It is being alleged that her signature during the oath ceremony was forged as it looked crooked

do'o kappa

12,890 次观看 • 3 个月前