本篇通译自：[# It’s 2022. Sometimes You Don’t Need Javascript at All](https://fatfish.medium.com/its-2022-sometimes-you-don-t-need-javascript-at-all-c347fea65aaf) ## 1. 颜色选择器我们通常需要通过复杂的 JavaScript 来实现一个类似下图的颜色选择器组件。 ![0_gVdaIXbeZ3Osa8O-.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/37d6b4dc0b4447a09015ef5014e4293b~tplv-k3u1fbpfcp-watermark.image?) 好消息来了，现在直接通过设置 input 标签属性，就自带这个颜色选择功能了~ `` https://code.juejin.cn/pen/7164305508357275652 ![GIF 2022-11-10 16-46-41.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dfc2c6cca7954b2e9c023f3768c43fca~tplv-k3u1fbpfcp-watermark.image?) 涨姿势了，赶紧收藏一波、加强记忆，后面总会用到~ ## 2. 打字效果纯 CSS 就能实现以下“打字效果” https://code.juejin.cn/pen/7164307268287070249 HTML ```

Welcome to JUEJIN

``` css ``` @-webkit-keyframes typing { from { width: 0; } } @-webkit-keyframes blink-caret { 50% { border-color: transparent; } } h1 { font: bold 300% Consolas, Monaco, monospace; border-right: .1em solid black; width: 16.5em; width: 21ch; margin: 2em 1em; white-space: nowrap; overflow: hidden; -webkit-animation: typing 7s steps(21, end), blink-caret .5s step-end infinite alternate; } ``` ## 3. 滑顶/触底效果我们通常是这样实现点击按钮，滚动条立即触顶/触底效果的： ``` const scrollToTop = () => { const c = document.documentElement.scrollTop || document.body.scrollTop if (c > 0) { window.requestAnimationFrame(scrollToTop) window.scrollTo(0, c - c / 8) } } ``` 现在不必了，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 如何实现五彩斑斓的“呼吸字”？速度拿去装杯！😏](https://juejin.cn/post/7163416841354739742) [# CSS 如何实现“咖啡墙错觉”效果？神奇~](https://juejin.cn/post/7163788902845644813) [# CSS 边框也能动画？background-origin 和 -clip 来施加魔法~](https://juejin.cn/post/7164179222914121765) 全部附上了码上掘金，代码可在线测试。有一说一，CSS 还真的挺神奇~~ 之前听一位后端同学说，因为觉得 CSS 样式太麻烦，看似与编程无关，于是放弃了做前端，转而做后端。。。。其实，可能看起来麻烦，用起来还是有点意思~~相当于多个手段，可作武器。

>OK，以上便是本篇分享，希望各位工友喜欢~ 欢迎点赞、收藏、评论 🤟 > >我是掘金安东尼 🤠 100 万人气前端技术博主 💥 INFP 写作人格坚持 1000 日更文 ✍ 关注我，安东尼陪你一起度过漫长编程岁月 🌏 _{**😹 加我微信 [ATAR53](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/93fbb0597b124aca9fa3f606616ae6bf~tplv-k3u1fbpfcp-watermark.image?)，拉你入群，定期抽奖、粉丝福利多多。只学习交友、不推文卖课~**} _{**😸 我的公众号：[掘金安东尼](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e5cd8bb380f84d1ab52d275b1cb4e441~tplv-k3u1fbpfcp-watermark.image?)，在上面，不止编程，更多还有生活感悟~**} _{**😺 我的 GithubPage: [https://tuaran.github.io](https://link.juejin.cn/?target=https%3A%2F%2Ftuaran.github.io%2F "https://link.juejin.cn?target=https%3A%2F%2Ftuaran.github.io%2F")，它已经被维护 4 年+ 啦~**}

***本文正在参加[「金石计划 . 瓜分6万现金大奖」](https://juejin.cn/post/7162096952883019783 "https://juejin.cn/post/7162096952883019783")***