本篇通译自：# It’s 2022. Sometimes You Don’t Need Javascript at All
1. 颜色选择器
我们通常需要通过复杂的 JavaScript 来实现一个类似下图的颜色选择器组件。
好消息来了，现在直接通过设置 input 标签属性，就自带这个颜色选择功能了~
<input type="color" value="#FF99FF" />
涨姿势了，赶紧收藏一波、加强记忆，后面总会用到~
2. 打字效果
纯 CSS 就能实现以下“打字效果”
HTML
<h1>Welcome to JUEJIN</h1>
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 一行代码就可解决了~
4. 顺滑切图
原来 CSS scroll-snap-type: x mandatory; 可以让你顺滑切图。当你滑动横向滚动条到一定位置时，会自动为你切图，这样显得流畅；
是否更顺滑，实际效果可以在码上掘金上去掉 scroll-snap-type: x mandatory 这一行，前后对比一试便知。
小结
另，推荐最近 3 篇关于 CSS 文章：
# CSS 边框也能动画？background-origin 和 -clip 来施加魔法~
全部附上了码上掘金，代码可在线测试。
有一说一，CSS 还真的挺神奇~~
之前听一位后端同学说，因为觉得 CSS 样式太麻烦，看似与编程无关，于是放弃了做前端，转而做后端。。。。
其实，可能看起来麻烦，用起来还是有点意思~~相当于多个手段，可作武器。
