站长资源
上次我们讲了用JS方式实现新闻不断滚动效果:实例操作之新闻不断滚动显示效果的实现
虽然代码也很精简了，但是对于JS有恐惧症的同学来说还是不太好理解，相对于JS，大家对css更容易掌握，那么今天我们就提供给大家一个用css书写的新闻不断向上滚动效果。
先写一段简单的html结构
<div class="box"> <ul class="list"> <li><a href="#">站长资源</a></li> <li><a href="#">全栈工程师</a></li> <li><a href="#">html模板</a></li> <li><a href="#">站长工具</a></li> </ul> </div>
我们分析一下css要如何写
首先我们要把li外面盒子的高度限制为一定的高度，然后超出的部分要隐藏掉
.list {
height:30px;
overflow:hidden;
}
然后每个li的高度要和外面盒子的高度一样，这样就可以保证只显示一个li
.list li {
position:relative;
height:30px;
line-height:30px;
font-size:14px;
}
注意这里添加了position:relative相对定位，因为接下来要写动画，动画是绝对定位
我们给li加上一个循环执行的动画
animation:movetop 4s infinite;
我们定义了一个动画名字为movetop执行时间是4秒，方式是循环
那么我们看动画要怎么写，这里和js有所区别，因为我们这里要自己根据li的条数来写动画
上面是4条新闻，我们就写4个过度动作
@keyframes movetop {
0% {
top:0px;
}
25% {
top:0px;
}
50% {
top:-30px;
}
75% {
top:-60px;
}
100% {
top:-90px;
}
}
我们让每次执行过度动作的时候元素向上移动他的高度，这里li的高度30px
这样就完成了元素的循环向上滚动效果
是不是比JS看起来简单了很多，不过也有缺点，css3的很多属性在IE9以下兼容性都不是很好，如何取舍大家根据自己的用户群体。
以上是分步给大家讲解实现的原理，附上完整的代码吧：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>用css的方式实现新闻文字不断向上滚动显示效果</title>
<style>
.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;
animation:movetop 4s infinite;
}
@keyframes movetop {
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="#">html模板</a></li>
<li><a href="#">站长工具</a></li>
</ul>
</div>
</body>
</html>
本文由站长资源原创首发，转载请注明出处
评论前必须登录！
注册