水平
方式一：marquee标签
- 实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现文字水平循环滚动</title>
</head>
<style>
</style>
<body>
<!--从右到左滚动 滚动速度scrollamount="10"-->
<marquee direction="left" scrollamount="10" width="400px">
<p>tehub一个优秀的中文社区平台</p>
</marquee><br/>
<!--从左到右滚动 滚动速度scrollamount="30"-->
<marquee direction="right" scrollamount="30" width="400px">
<p>tehub一个优秀的中文社区平台</p>
</marquee><br/>
</body>
</html>
- 效果：（没加速度之前的）
方式二：animation
在css中，可以利用animation和keyframest通过给文字绑定一个循环滚动动画来实现文字循环滚动效果。
- 实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现文字水平循环滚动</title>
</head>
<style>
.box{
width: 400px;
}
.animate{
display: inline-block;
white-space: nowrap;
animation: 5s scroll linear infinite normal;
}
@keyframes scroll {
0% {
transform: translateX(100%);
-webkit-transform:translateX(100%);
}
100% {
transform: translateX(-100%);
-webkit-transform:translateX(-100%);
}
}
@-webkit-keyframes scroll {
0% {
transform: translateX(100%);
-webkit-transform:translateX(100%);
}
100% {
transform: translateX(-100%);
-webkit-transform:translateX(-100%);
}
}
</style>
<body>
<div class="box">
<p class="animate">tehub一个优秀的中文社区平台</p>
</div>
</body>
</html>
- 效果
垂直
方式一：marquee标签
- 实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现文字垂直循环滚动</title>
</head>
<style>
</style>
<body>
<marquee direction="up" scrollamount="5" width="400px">
<p>tehub一个优秀的中文社区平台</p>
</marquee><br/>
<marquee direction="down" scrollamount="2" width="400px">
<p>tehub一个优秀的中文社区平台</p>
</marquee>
</body>
</html>
方式二：animation
在css中，可以利用animation和keyframest通过给文字绑定一个循环滚动动画来实现文字垂直循环滚动效果。
- 实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现文字垂直循环滚动</title>
</head>
<style>
.box{
width: 400px;
}
.animate{
display: inline-block;
white-space: nowrap;
animation: 5s scroll linear infinite normal;
}
@keyframes scroll {
0% {
transform: translateY(100%);
-webkit-transform:translateY(100%);
}
100% {
transform: translateY(-100%);
-webkit-transform:translateY(-100%);
}
}
@-webkit-keyframes scroll {
0% {
transform: translateY(100%);
-webkit-transform:translateY(100%);
}
100% {
transform: translateY(-100%);
-webkit-transform:translateY(-100%);
}
}
</style>
<body>
<div class="box">
<p class="animate">tehub一个优秀的中文社区平台</p>
</div>
</body>
</html>
- 效果
评论(0)