You can mask other elements with icons in CSS to create this glittery icon hover/interaction effect
canvas {
mask: url(/img/icons/next.svg);
}
Check this example, inspired by the new
@vercel
homepage treats that are dropping 🖤 (Had to have a go at whipping this up over food break 😅)
1. Create some <canvas> that animate squares with different hue shades (Using
@greensock
to only animate on :hover with ticker ⏲️)
2. Mask each canvas with a desired icon
3. On :hover, fade in the animating canvas 🤙
Check out the exploding view! 🤯
#html #css #uidesign #viral #website #webdesign #webdevelopment #frontend #webdevelopment #development #ui #ux #youtubeshorts #youtube #ytshorts #viral #trending #shortvideo #shortsvideo #shorts #shortfeed
@CodePen
link below 👇