CSS3 滾動滑動可以讓網頁更加生動,增強用戶體驗。下面介紹一些方法。
.scroll {
overflow: scroll;
}
使用 overflow 屬性為 scroll 可以讓元素出現滾動條。
.scroll {
-webkit-overflow-scrolling: touch;
}
在移動設備中使用滾動條時,為避免卡頓,可以使用 -webkit-overflow-scrolling 屬性,開啟硬件加速。
@keyframes slide {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
.slide {
animation: slide 1s infinite;
}
使用 CSS3 動畫可以讓元素在指定時間內滑動,使用 infinite 可以讓動畫循環播放。
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
}
在網頁中使用輪播圖時,可以使用第三方庫 Slick。通過 CSS3 控制樣式可以實現不同的滑動效果。上面的代碼是 Slick 中的基礎樣式。
以上是 CSS3 實現滾動滑動的一些方法,開發者可以根據實際需要選擇適合自己的方式。
下一篇php 7.19