四个可以用CSS 实现复杂JavaScript 效果的技巧-51CTO.COM

最近，我学到了一些比较实用的CSS编程技巧，之前很多效果不得不求助于 JavaScript 来实现，但是今天，我学会了直接用CSS 来完成。相信看完这篇你也会爱上CSS，一起来看看吧！

1.轮播动画

没想到用CSS就能做到平滑过渡的效果，大家可以试试滑动图片，会有惊喜给你！

HTML

<div class="box">
  <img src="https://images.unsplash.com/photo-1518489913881-199b7c7a081d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1774&q=80" alt="">
  <img src="https://images.unsplash.com/photo-1484446991649-77f7fbd73f1f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80" alt="">
  <img src="https://images.unsplash.com/photo-1512005286309-e5b890ca36b6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2064&q=80" alt="">
</div>

CSS

*{
  margin: 0;
  padding: 0;
}
.box{
  // Key CSS
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  display: flex;
  overflow-x: scroll;
}
.box img{
  height: 100vh;
  min-width: 100vw;
  // Key CSS
  scroll-snap-align: start;
}

2.颜色选择器

你必须使用过类似此组件的组件才能获得颜色，我们通常需要编写复杂的 JavaScript 来实现它的功能，但现在我们可以通过 input 元素来实现。

我们只需要将 type 设置为“color”即可获得浏览器原生支持的颜色选择器。

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

你可以尝试单击图片并为猫赋予新的颜色。

演示地址：https://codepen.io/qianlong/pen/vYRmypd

3.打字效果

你能想象只用 CSS 实现打字机效果吗？这真是太神奇了。

演示地址：https://codepen.io/qianlong/pen/ZExKBPW

HTML

<h1>Welcome to medium</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;
}

4.平滑滚动到顶部

当网页过长时，我们通常会提供一个按钮，让用户可以流畅地滚动到顶部。我们曾经使用 JavaScript 来做到这一点。

const scrollToTop = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop


  if (c > 0) {
    window.requestAnimationFrame(scrollToTop)
    window.scrollTo(0, c - c / 8)
  }
}

演示地址：https://codepen.io/qianlong/pen/NWYpqZq

我们真的需要那么多麻烦吗？是的，现在，我们只需要一行 CSS 就可以做到。

html, body {
  scroll-behavior: smooth;
}

演示地址：https://codepen.io/qianlong/pen/QWmvKZx

最后

如果你觉得我今天分享这些CSS技巧对你有帮助的话，请记得点赞我，关注我，并将它分享给你的朋友，也许能够帮助到他。

最后，感谢你的阅读，祝编程愉快。