涨姿势了,这 4 个场景可用 CSS 完全取代 JS ~
本篇通译自:# It’s 2022. Sometimes You Don’t Need Javascript at All
1. 颜色选择器
我们通常需要通过复杂的 JavaScript 来实现一个类似下图的颜色选择器组件。
好消息来了,现在直接通过设置 input 标签属性,就自带这个颜色选择功能了~
<input type="color" value="#FF99FF" />
https://code.juejin.cn/pen/7164305508357275652
涨姿势了,赶紧收藏一波、加强记忆,后面总会用到~
2. 打字效果
纯 CSS 就能实现以下“打字效果”
https://code.juejin.cn/pen/7164307268287070249
HTML
css
3. 滑顶/触底效果
我们通常是这样实现点击按钮,滚动条立即触顶/触底效果的:
现在不必了,CSS 一行代码就可解决了~
https://code.juejin.cn/pen/7164310260218331174
4. 顺滑切图
原来 CSS scroll-snap-type: x mandatory;
可以让你顺滑切图。当你滑动横向滚动条到一定位置时,会自动为你切图,这样显得流畅;
https://code.juejin.cn/pen/7164311303769554948
是否更顺滑,实际效果可以在码上掘金上去掉 scroll-snap-type: x mandatory
这一行,前后对比一试便知。
小结
另,推荐最近 3 篇关于 CSS 文章:
# CSS 边框也能动画?background-origin 和 -clip 来施加魔法~
全部附上了码上掘金,代码可在线测试。
有一说一,CSS 还真的挺神奇~~
之前听一位后端同学说,因为觉得 CSS 样式太麻烦,看似与编程无关,于是放弃了做前端,转而做后端。。。。
其实,可能看起来麻烦,用起来还是有点意思~~相当于多个手段,可作武器。
<hr>
OK,以上便是本篇分享,希望各位工友喜欢~ 欢迎点赞、收藏、评论 🤟
我是掘金安东尼 🤠 100 万人气前端技术博主 💥 INFP 写作人格坚持 1000 日更文 ✍ 关注我,安东尼陪你一起度过漫长编程岁月 🌏
本文正在参加「金石计划 . 瓜分6万现金大奖」
版权声明: 本文为 InfoQ 作者【掘金安东尼】的原创文章。
原文链接:【http://xie.infoq.cn/article/857bb2edd1a9fed76c70fa5c0】。文章转载请联系作者。
评论