css如何做滚动字幕效果？下面本篇文章给大家介绍一下使用CSS做滚动字幕效果的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
在CSS中，可以利用animation属性和@keyframes规则，配合top属性来实现滚动字幕效果。
话不多说，直接上实例代码
moveUpul,li {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.container {
display: inline-block;
background: #efefef;
padding: 10px;
border: 1px solid #ccc;
font-family: "Microsoft YaHei";
}
.container .li-box {
height: 28px;
overflow: hidden;
}
.container ul {
position: relative;
animation: moveUp 8s 0.6s infinite;
-webkit-animation: moveUp 8s 0.6s infinite;
}
@keyframes moveUp {
0% {
top: 0px;
}
18% {
top: 0px;
}
20% {
top: -28px;
}
38% {
top: -28px;
}
40% {
top: -56px;
}
58% {
top: -56px;
}
60% {
top: -84px;
}
78% {
top: -84px;
}
80% {
top: -112px;
}
98% {
top: -112px;
}
}
@-webkit-keyframes moveUp
/*Safari and Chrome*/
{
0% {
top: 0px;
}
18% {
top: 0px;
}
20% {
top: -28px;
}
38% {
top: -28px;
}
40% {
top: -56px;
}
58% {
top: -56px;
}
60% {
top: -84px;
}
78% {
top: -84px;
}
80% {
top: -112px;
}
98% {
top: -112px;
}
}
.container li {
line-height: 1.8;
color: #666;
}
- 滚动字幕1
- 滚动字幕2
- 滚动字幕3
- 滚动字幕4
- 滚动字幕5
- 滚动字幕6
效果图：
更多web前端开发知识，请查阅 HTML中文网 ！！
扫一扫
1844
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
