站长资源
全栈工程师站点

用css的方式实现新闻文字不断向上滚动显示效果

用css的方式实现新闻文字不断向上滚动显示效果

上次我们讲了用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>

本文由站长资源原创首发,转载请注明出处


在线演示  
×

站长资源极速下载通道: 用css的方式实现新闻文字不断向上滚动显示效果

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » 用css的方式实现新闻文字不断向上滚动显示效果

评论 抢沙发

评论前必须登录!