1. 前言: 前端使用HTML+CSS實現一個無縫滾動的列表效果
示例圖:
2. 源碼
- html部分源碼:
<!--* @Author: wangZhiyu <w3209605851@163.com>* @Date: 2024-07-05 23:33:20* @LastEditTime: 2024-07-05 23:49:09* @LastEditors: wangZhiyu <w3209605851@163.com>* @FilePath: \無縫自動滾動動畫\index.html* @Descripttion: 無縫自動滾動動畫
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>無縫自動滾動動畫</title><link rel="stylesheet" href="./index.css">
</head><body><div class="container"><div class="scrollArea"><!-- 第一段內容 --><div class="item">內容1</div><div class="item">內容2</div><div class="item">內容3</div><div class="item">內容4</div><div class="item">內容5</div><!-- 重復循環一次第一段內容 --><div class="item">內容1</div><div class="item">內容2</div><div class="item">內容3</div><div class="item">內容4</div><div class="item">內容5</div></div></div>
</body></html>
- css部分源碼:
* {margin: 0;padding: 0;
}/* 大盒子樣式設置,注意大盒子必須要指定寬度,并且設置overflow屬性為hidden */
.container {width: 200px;margin: 0 auto;margin-top: 200px;height: 125px;overflow: hidden;background-color: rgba(0, 0, 0, 0.05);text-align: center;
}/* 大盒子的子元素,列表內容的父元素,設置滾動動畫 */
.scrollArea {/* 設置里的動畫時長根據不同的情況設置即可 */animation: scroll 3s linear infinite;
}/* 設置當鼠標懸停時,自動挺尸滾動 */
.scrollArea:hover {animation-play-state: paused;
}/* 滾動動畫 */
@keyframes scroll {0% {}100% {transform: translateY(-50%);}
}3. 原理解釋:
-
為什么需要兩個相同的列表:
答: 因為當第一個列表滾動到頂部時,第二個列表也會隨之向上滾動,就形成了視差效果,向上滾動了一個元素區域,下面就填充進來了一個元素區域,并且當滾動完畢之后,會重新回到初識位置繼續滾動,也會形成視差效果,由此實現了無縫滾動
-
為什么需要在大盒子與列表元素之間再添加一個盒子進去:
答: 這個盒子的主要作用是用來滾動的,因為大盒子設置了
overflow:hidden,所以大盒子與列表元素中間的盒子滾動時是不會超出大盒子的范圍的,并且這個盒子也起到了顯示元素的顯示范圍的作用
4. 總結
以上就是本期分享的全部內容了,最近偶然又遇到了這個需求,就單獨拿出來做了個demo🙂
顯卡驅動，黑屏|雙屏無法使用問題解決方法)
)
