使用css动画实现文字自动滚动,实现代码如下
HTML代码
css代码
完整代码:
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p class="scroll">你好,这是一行可以滚动的文字。</p>
</body>
</html>
<style>
.scroll{
color:#ccddff;
font-size:24px;
overflow:hidden;
white-space:nowrap;
animation: scroll 5s linear infinite;
}
@keyframes scroll {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-50%);
}
}
</style>