正在加载视频...

视频加载失败

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

"Avatar Indicators, using CSS Mask / Trig" by Simon Goellner

CodePen.IO

204,269 subscribers

21,647 次观看 • 11 个月前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

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

相关视频

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! 👇

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,615 次观看 • 3 年前

Little progressively enhanced CSS border reveal button using mask && @property .border-button:hover { --complete: 100; } .border-button::after { transition: --complete 0.4s; mask: conic-gradient( from var(--from), #000 var(--complete), ); }

Little progressively enhanced CSS border reveal button using mask && @property .border-button:hover { --complete: 100; } .border-button::after { transition: --complete 0.4s; mask: conic-gradient( from var(--from), #000 var(--complete), ); }

jhey ʕ•ᴥ•ʔ

118,301 次观看 • 1 年前

I love animating using CSS.

I love animating using CSS.

David Aerne

120,528 次观看 • 2 年前

CSS Tip! ✨ Combine :has() and trig functions to select previous siblings and create an Apple-style OS dock 🔥 CSS only, no JS! 🤯 .b:has(+ .b:hover), .b:hover + .b { flex: calc(0.2 + (sin(30deg) * 1.5)); translate: 0 calc(sin(30deg) * -75%); } CodePen.IO link below! 👇

CSS Tip! ✨ Combine :has() and trig functions to select previous siblings and create an Apple-style OS dock 🔥 CSS only, no JS! 🤯 .b:has(+ .b:hover), .b:hover + .b { flex: calc(0.2 + (sin(30deg) * 1.5)); translate: 0 calc(sin(30deg) * -75%); } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

517,911 次观看 • 3 年前

Little skeumorphic button experiment using css box-shadow

Little skeumorphic button experiment using css box-shadow

Petr Knoll

363,034 次观看 • 1 年前

Responsive grid layout using HTML and CSS 🚀

Responsive grid layout using HTML and CSS 🚀

David Mráz

100,843 次观看 • 2 年前

Got carried away with this interactive module for breaking down the CSS mask-image property

Got carried away with this interactive module for breaking down the CSS mask-image property

rauno

31,639 次观看 • 1 年前

created this animated vestaboard, made using Next.js and Tailwind CSS

created this animated vestaboard, made using Next.js and Tailwind CSS

OPM

12,995 次观看 • 9 个月前

I made a version of this using only modern CSS. 👀

I made a version of this using only modern CSS. 👀

H. Kyle Foster

64,822 次观看 • 10 个月前

Create this layout using nested css grids and media queries 💪

Create this layout using nested css grids and media queries 💪

David Mráz

14,283 次观看 • 1 年前

Made this 404 error page just using CSS ✅ Code 👇

Made this 404 error page just using CSS ✅ Code 👇

Atharva ☄️

190,551 次观看 • 3 年前

Create this responsive flex layout using just HTML and CSS 🚀

Create this responsive flex layout using just HTML and CSS 🚀

David Mráz

38,100 次观看 • 2 年前

messin' with css frosted + saturated borders using background-clip + backdrop-filter 👨‍🍳

messin' with css frosted + saturated borders using background-clip + backdrop-filter 👨‍🍳

jhey ʕ•ᴥ•ʔ

158,295 次观看 • 10 个月前

Dropdown using HTML and CSS 🔥 Code in the comments below👇

Dropdown using HTML and CSS 🔥 Code in the comments below👇

Shefali

27,364 次观看 • 1 年前

💡 CSS Tip! Get the scroll progress of the page as a CSS variable using a few lines of code ✅ Powered by Scroll driven animations ✅ Defined at the root level ✅ Typed using @property ✅ You can easily use it within any formula CodePen.IO demo in the reply 👇

💡 CSS Tip! Get the scroll progress of the page as a CSS variable using a few lines of code ✅ Powered by Scroll driven animations ✅ Defined at the root level ✅ Typed using @property ✅ You can easily use it within any formula CodePen.IO demo in the reply 👇

CSS by T. Afif

35,659 次观看 • 2 年前

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

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

David Mráz

300,206 次观看 • 2 年前

🎮 New CSS Game! What about a CSS game that you can play with your keyboard? No, it's not a joke but a reality! Play "Super CSS Mario", the first CSS-Only game playable using your keyboard. CodePen.IO demo in the next tweet 👇 0% JavaScript - 100% CSS Magic! Have fun🤩

🎮 New CSS Game! What about a CSS game that you can play with your keyboard? No, it's not a joke but a reality! Play "Super CSS Mario", the first CSS-Only game playable using your keyboard. CodePen.IO demo in the next tweet 👇 0% JavaScript - 100% CSS Magic! Have fun🤩

CSS by T. Afif

13,762 次观看 • 2 年前

Face Expression Rating using HTML/CSS 🚀🚀 How's it folks...? Code 👇

Face Expression Rating using HTML/CSS 🚀🚀 How's it folks...? Code 👇

Anas

157,555 次观看 • 3 年前

one way: clip-path: shape() in css single element, draw outline, scoop corner no stitched-together pieces/mask gymnastics 🧙

one way: clip-path: shape() in css single element, draw outline, scoop corner no stitched-together pieces/mask gymnastics 🧙

jhey ʕ•ᴥ•ʔ

99,995 次观看 • 19 天前