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

1. 颜色选择器

大家往往需要根据繁杂的 JavaScript 来达到一个相近下面的图的颜色选择器部件。

CSS 如何做到五彩斑斓的“吸气字?速率拿来装杯!

好消息来了,如今立即可设置 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; 能够让你丝滑网页切图。如果你滚动横着下拉列表到一定位置时,就会自动给你网页切图,那样看起来顺畅;

是不是更丝滑,预期效果还可以在码上AdminJS上除掉 scroll-snap-type: x mandatory 这一行,前后对比效果一试就知。

总结

另,强烈推荐近期 3 篇有关 CSS 文章内容:

# CSS 如何做到五彩斑斓的“吸气字”?速率拿来装杯!

声明:本文仅供个人学习使用,来源于互联网,本文有改动,本文遵循[BY-NC-SA]协议, 如有侵犯您的权益,请联系本站,本站将在第一时间删除。谢谢你

原文地址:CSS 如何做到五彩斑斓的“吸气字?速率拿来装杯!