全球百事通！四个可以用CSS 实现复杂JavaScript 效果的技巧

2022-09-20 15:48:06来源：web前端开发

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

1.轮播动画

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

(资料图)

HTML

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”即可获得浏览器原生支持的颜色选择器。

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

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

3.打字效果

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

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

HTML

Welcome to medium

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 就可以做到。