Html
    Css
    Js

    
                        
.menu-list {
	list-style:none;
	width:300px;
	margin:100px auto;
}
.menu-list li {
	display:block;
}
.list {
	list-style:none;
	margin-left:-50px;
	width:300px;
	height:60px;
	overflow:hidden;
}
.list li {
	width:300px;
	height:60px;
	position:relative;
	animation:myfirst 4s infinite;
	line-height:60px;
	text-align:center;
	font-size:30px;
	color:#fff;
}
@keyframes myfirst {
	0% {
	background-color:#4ec7f3;
	top:0px;
}
25% {
	background-color:#4ec7f3;
	top:0px;
}
50% {
	background:#42c58a;
	top:-60px;
}
75% {
	background:#a0a0a0;
	top:-120px;
}
100% {
	background:#dc143c;
	top:-180px;
}
}.font30 {
	font-size:30px;
	color:#7d7d7d;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.8.3
 立即下载

CSS文字滚动

自己学习的,供大家使用免费,希望大家更近一步

0