涨姿势了，这 4 个场景可用 CSS 完全取代 JS ~-阿里云开发者社区

涨姿势了，这 4 个场景可用 CSS 完全取代 JS ~

2023-04-25 92

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 涨姿势了，这 4 个场景可用 CSS 完全取代 JS ~

本篇通译自：# It’s 2022. Sometimes You Don’t Need Javascript at All

1. 颜色选择器

我们通常需要通过复杂的 JavaScript 来实现一个类似下图的颜色选择器组件。

好消息来了，现在直接通过设置 input 标签属性，就自带这个颜色选择功能了~

<input type="color" value="#FF99FF" />

code.juejin.cn/pen/7164305…

涨姿势了，赶紧收藏一波、加强记忆，后面总会用到~

2. 打字效果

纯 CSS 就能实现以下“打字效果”

code.juejin.cn/pen/7164307…

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)
  }
}