umtheme 上次我们讲了用JS方式实现新闻不断滚动效果:实例操作之新闻不断滚动显示效果的实现 虽然代码也很精简了，但是对于JS有恐惧症的同学来说还是不太好理解，相对于JS，大家对css更容易掌握，那么今天我们就提供给大家一个用css书写的新闻不断向上滚动效果。 先写一段简单的html结构 <ul...
在前端开发过程中，有时候针对某个模块需要无限循环的滚动一些消息或菜单，我们常用的方法基本上都是通过js来实现，虽然代码相对来说可能会精简一些，但是对于JS不是很熟悉的同学来说还是不太好理解，毕竟相对于JS，大家对css更容易掌握，那么今天我们就提供给大家一个用纯css实现的列表循环向上滚动的效果。
实现思路通过CSS3的animation属性来实现，因为transition是需要手动的触发，而且不能无限次执行下去，而animation恰好能解决这个问题。
animation: scrollUp 6s infinite;
滚动速度可调整animation属性中6s的值，代表6秒。
完整html代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯css实现菜单或列表循环向上滚动效果</title>
<style>
html,
body {
padding: 0;
margin: 0;
}
body {
font-family: 微软雅黑, 'Microsoft YaHei', 'PingFang SC', Hiragino Sans GB, Helvetica Neue, Helvetica, Condensed, Arial, sans-serif;
}
a {
color: #2D2D2D;
text-decoration: none;
}
.box {
width: 300px;
margin: 100px auto;
}
.list {
list-style: none;
width: 100%;
height: 30px;
overflow: hidden;
}
.list li {
width: 100%;
height: 30px;
position: relative;
line-height: 30px;
font-size: 14px;
background-color: #f6f6f6;
padding: 0 10px;
animation: scrollUp 6s infinite;
}
@keyframes scrollUp {
0% {
top: 0px;
}
25% {
top: 0px;
}
50% {
top: -30px;
}
75% {
top: -60px;
}
100% {
top: -90px;
}
}
</style>
</head>
<body>
<div class="box">
<ul class="list">
<li><a href="#">优美主题</a></li>
<li><a href="#">前端开发</a></li>
<li><a href="#">模版设计</a></li>
<li><a href="#">优美插件</a></li>
</ul>
</div>
</body>
</html>不过也有缺点，css3的很多属性在IE9以下兼容性都不是很好，如何取舍大家根据自己的需要。
演示效果
此处为隐藏内容，请评论后查看隐藏内容，谢谢！
