四個可以用CSS 實現(xiàn)復(fù)雜JavaScript 效果的技巧
作者：佚名
最近，我學(xué)到了一些比較實用的CSS編程技巧，之前很多效果不得不求助于 JavaScript 來實現(xiàn)，但是今天，我學(xué)會了直接用CSS 來完成。
最近，我學(xué)到了一些比較實用的CSS編程技巧，之前很多效果不得不求助于 JavaScript 來實現(xiàn)，但是今天，我學(xué)會了直接用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;
overflow-scrolling: touch;
display: flex;
overflow-x: scroll;
}
.box img{
height: 100vh;
min-width: 100vw;
// Key CSS
scroll-snap-align: start;
}2.顏色選擇器
你必須使用過類似此組件的組件才能獲得顏色，我們通常需要編寫復(fù)雜的 JavaScript 來實現(xiàn)它的功能，但現(xiàn)在我們可以通過 input 元素來實現(xiàn)。
我們只需要將 type 設(shè)置為“color”即可獲得瀏覽器原生支持的顏色選擇器。
<input type="color" value="#FF99FF" />
你可以嘗試單擊圖片并為貓賦予新的顏色。
演示地址：https://codepen.io/qianlong/pen/vYRmypd
3.打字效果
你能想象只用 CSS 實現(xiàn)打字機效果嗎？這真是太神奇了。
演示地址：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;
animation: typing 7s steps(21, end),
blink-caret .5s step-end infinite alternate;
}
4.平滑滾動到頂部
當(dāng)網(wǎng)頁過長時，我們通常會提供一個按鈕，讓用戶可以流暢地滾動到頂部。我們曾經(jīng)使用 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
我們真的需要那么多麻煩嗎？是的，現(xiàn)在，我們只需要一行 CSS 就可以做到。
html, body {
scroll-behavior: smooth;
}演示地址：https://codepen.io/qianlong/pen/QWmvKZx
最后
如果你覺得我今天分享這些CSS技巧對你有幫助的話，請記得點贊我，關(guān)注我，并將它分享給你的朋友，也許能夠幫助到他。
最后，感謝你的閱讀，祝編程愉快。
責(zé)任編輯：華軒
來源：
web前端開發(fā)
