3

四个可以用CSS 实现复杂JavaScript 效果的技巧

 1 year ago
source link: https://www.51cto.com/article/719194.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

四个可以用CSS 实现复杂JavaScript 效果的技巧

作者：佚名 2022-09-20 15:33:35
最近，我学到了一些比较实用的CSS编程技巧，之前很多效果不得不求助于 JavaScript 来实现，但是今天，我学会了直接用CSS 来完成。

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

f4776718454bb190aac6763c907ed3391592e1.jpg

1.轮播动画

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

<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>
*{
  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

<h1>Welcome to medium</h1>
@-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技巧对你有帮助的话，请记得点赞我，关注我，并将它分享给你的朋友，也许能够帮助到他。

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

责任编辑：华轩 来源： web前端开发

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK