正在加载视频...

视频加载失败

返回首页

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), ); }

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

144,228 subscribers

111,340 次观看 • 1 年前 •via X (Twitter)

艺术教育科学技术
LIVE

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

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

相关视频

extra detail: animate a CSS custom property from 0 to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);
0:10

extra detail: animate a CSS custom property from 0 to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);

jhey ʕ•ᴥ•ʔ

77,042 次观看 • 1 年前

CSS Tip! ✨ You can transition grid tracks 👀 button:hover { --h: 1; } button { transition: grid-template-columns 0.2s; grid-template-columns: calc(var(--icon) * (1 - var(--h))) 1fr calc(var(--icon) * var(--h)); } Rad for this button concept! 🤙 CodePen.IO link below! 👇
0:10

CSS Tip! ✨ You can transition grid tracks 👀 button:hover { --h: 1; } button { transition: grid-template-columns 0.2s; grid-template-columns: calc(var(--icon) * (1 - var(--h))) 1fr calc(var(--icon) * var(--h)); } Rad for this button concept! 🤙 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

107,091 次观看 • 3 年前

Neat li'l #CSS gradient trick: A gradient circular chart effect 👀 1. a gradient mask 2. a conic gradient all the details on my blog
0:16

Neat li'l #CSS gradient trick: A gradient circular chart effect 👀 1. a gradient mask 2. a conic gradient all the details on my blog

Adam Argyle

67,503 次观看 • 3 年前

you can totally do it with css 🧑‍🍳 use a border mask, layers + overflow: hidden, or other tricks skip animating the gradient though, jus' spin a 1:1 gradient layer 🤙
0:16

you can totally do it with css 🧑‍🍳 use a border mask, layers + overflow: hidden, or other tricks skip animating the gradient though, jus' spin a 1:1 gradient layer 🤙

jhey ʕ•ᴥ•ʔ

285,985 次观看 • 6 个月前

A little before and after of my “Complete Order” UI button animation concept ✨
0:11

A little before and after of my “Complete Order” UI button animation concept ✨

Michael Nowak

50,443 次观看 • 2 年前

Need a gradient border? Use CSS background-clip 🤙 input { background: linear-gradient(canvas, canvas), linear-gradient(120deg, hsl(278, 44%, 73%), hsl(35, 81%, 73%) ); border: 4px solid transparent; background-clip: padding-box, border-box; }
0:18

Need a gradient border? Use CSS background-clip 🤙 input { background: linear-gradient(canvas, canvas), linear-gradient(120deg, hsl(278, 44%, 73%), hsl(35, 81%, 73%) ); border: 4px solid transparent; background-clip: padding-box, border-box; }

jhey ʕ•ᴥ•ʔ

82,376 次观看 • 2 年前

Little skeumorphic button experiment using css box-shadow
0:15

Little skeumorphic button experiment using css box-shadow

Petr Knoll

362,819 次观看 • 1 年前

little details 👨‍🍳 tiny css transition-delay on :hover filters noise and captures intent .text { transition: grid-template-columns 0.2s var(--ease); } button:hover .text { grid-template-columns: 1fr; transition-delay: 0.1s; }
0:14

little details 👨‍🍳 tiny css transition-delay on :hover filters noise and captures intent .text { transition: grid-template-columns 0.2s var(--ease); } button:hover .text { grid-template-columns: 1fr; transition-delay: 0.1s; }

jhey ʕ•ᴥ•ʔ

59,207 次观看 • 7 个月前

This border-radius transition 🤌🏽 Believe it or not, it's just CSS.
0:12

This border-radius transition 🤌🏽 Believe it or not, it's just CSS.

Haz

288,414 次观看 • 4 个月前

the transition from woman’s world to california gurls is a complete GAG
0:18

the transition from woman’s world to california gurls is a complete GAG

e

20,478 次观看 • 1 年前

Scenes from Paris last night are ones of complete & utter chaos.
0:11

Scenes from Paris last night are ones of complete & utter chaos.

Concerned Citizen

30,157 次观看 • 1 年前

⚡️ From the Iraqi-Iranian border: Scenes after the Israeli -American aggression on a site near the Mehran border crossing
0:18

⚡️ From the Iraqi-Iranian border: Scenes after the Israeli -American aggression on a site near the Mehran border crossing

War Monitor

65,273 次观看 • 3 个月前

If you take off the mask, you will see......... mask & suit from FORFUN
0:11

If you take off the mask, you will see......... mask & suit from FORFUN

F_wonder

17,316 次观看 • 1 年前

Indian students from the union territory of J&K cross the Iran border into Armenia.
0:12

Indian students from the union territory of J&K cross the Iran border into Armenia.

Sidhant Sibal

489,301 次观看 • 1 年前

Stylized damage mask using ucupaint decal projector to control the gradient
0:16

Stylized damage mask using ucupaint decal projector to control the gradient

passivestar

90,829 次观看 • 1 年前

More from the border
0:14

More from the border

Mossad Commentary

108,999 次观看 • 1 年前

Chilling video from Durand line , Chaman border Afghan Taliban & Pakistani army are shelling each other.
0:12

Chilling video from Durand line , Chaman border Afghan Taliban & Pakistani army are shelling each other.

War & Gore

58,799 次观看 • 6 个月前

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

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

CodePen.IO

21,647 次观看 • 9 个月前