You can use container queries and linear() easing to create this bouncy CSS only toggle 🤙
:root {
--magic-ease: linear( 0, 0.0039, 0.0157, 0.0352...);
}
label { container-type: size; }
label::after {
translate: calc(var(--active) * (100cqi - 100%)) -50%;
transition: translate 1s var(--magic-ease);
}
:checked ~ label { --active: 1; }
You can lean into using scoped custom properties when the input becomes checked and then translate a pseudoelement based on the container size 🤓 The nice thing here is that if the container changes size, the translation still works. Check the video as the aspect-ratio is changed ✨
Use linear() to get the little bounce effect!
Reminded of linear() as this Vegas Sphere demo gets built 😅
#ytshorts #html #css #javascript #programming #trendingshorts #trend #youtubeshort #ytshort #yt #ytshortsindia #shortsvideo #shorts #shortsfeed #shortfeed #viral #trending #viral #ui #webdevelopment #website #webdesign #webdeveloper #webdesigner #web3 #html #html5 #codepen #css #css3 #javascript #jquery #angular #react #creative #creativity #video #videos #vlog #vlogs
🎯 SUBSCRIBE to get more amazing AI Videos!
► https://www.youtube.com/@3sdcode?sub_...
Live Demo and Download: https://codepen.io/jh3y/pen/wvNOGrV
Video Credit By: / jh3yy