四個可以用CSS 實現復雜JavaScript 效果的技巧

作者：佚名 2022-09-20 15:33:35

最近，我學到了一些比較實用的CSS編程技巧，之前很多效果不得不求助于 JavaScript 來實現，但是今天，我學會了直接用CSS 來完成。

最近，我學到了一些比較實用的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技巧對你有幫助的話，請記得點贊我，關注我，并將它分享給你的朋友，也許能夠幫助到他。

最后，感謝你的閱讀，祝編程愉快。

責任編輯：華軒來源： web前端開發