css文字轮播图 |css 悬浮阴影

代码如下：
HTML：
<div class="scroll-box">
<ul class="scroll-list">
<li>这里是第一条公告</li>
<li>这里是第二条公告</li>
<li>这里是第三条公告</li>
<li>这里是第四条公告</li>
<li>这里是第五条公告</li>
</ul>
</div>
CSS：
.scroll-box {
width: 350px;
height: 40px;
overflow: hidden;
position: relative;
}
.scroll-list {
width: 100%;
position: absolute;
top: 0;
left: 0;
animation: scroll-up 5s linear infinite;
}
.scroll-list li {
padding: 10px 0;
}
@keyframes scroll-up {
0% {
transform: translateY(0);
}
25% {
transform: translateY(-40px);
}
50% {
transform: translateY(-80px);
}
75% {
transform: translateY(-120px);
}
100% {
transform: translateY(-160px);
}
}

使用CSS实现文字的轮播效果，大家需要使用到CSS3中的动画（animation）属性。要实现轮播效果，大家需要给文字列表（ul）添加一个向上滚动的动画。大家可以通过 translateY 来实现内容的滚动，每隔一段时间，就让内容向上滚动一定的高度即可。

以上代码就是基本的CSS实现文字轮播的代码，只需要将文字列表（ul）置于容器（div）内，并设置好容器的高度及溢出隐藏属性，就可以实现简单的轮播效果了。如果需要改变轮播速度，可以调整 animation 属性的时间值即可。