CSS3是一種非常強大的前端技術(shù)，可以實現(xiàn)各種各樣的動畫效果，其中滾動帶旋轉(zhuǎn)是其中一種，它可以使網(wǎng)頁更加生動有趣。

.rotate-scroll {
overflow: hidden;
position: relative;
}
.rotate-scroll:before {
content: '';
position: absolute;
top: -100%;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
z-index: 1;
}
.rotate-scroll:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: -100%;
left: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
z-index: 1;
}
.rotate-scroll-inner {
position: relative;
transition: transform 1s ease-out;
transform: translateY(0);
z-index: 2;
animation: rotate-scroll 10s linear infinite;
}
@keyframes rotate-scroll {
0% {
transform: rotate(0deg) translateY(0);
}
100% {
transform: rotate(-360deg) translateY(-100%);
}
}

上面的代碼就是實現(xiàn)滾動帶旋轉(zhuǎn)的核心代碼，其中先創(chuàng)建一個class為rotate-scroll的div包含一個class為rotate-scroll-inner的子元素，在rotate-scroll中通過:before和:after兩個偽元素來實現(xiàn)具有漸變效果的遮罩。rotate-scroll-inner是需要滾動的內(nèi)容，在這里通過transform屬性來實現(xiàn)其向上滾動，同時也添加了一個動畫效果來實現(xiàn)旋轉(zhuǎn)。這樣，我們就可以實現(xiàn)一個既有滾動帶旋轉(zhuǎn)的效果了。