4個可以用CSS 實作複雜JavaScript 效果的技巧

英文 | https://javascript.plainenglish.io/sometimes-you-dont-need-javascript-at-all-73a6a226a1c3

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

最後，感謝你的閱讀，祝程式設計愉快。