在代码中实现从左向右滑动文本而不是图像,可以通过以下步骤来实现:
以下是一个示例代码:
HTML:
<div class="text-container">
<p class="sliding-text">滑动的文本</p>
</div>
CSS:
.text-container {
width: 300px;
height: 50px;
background-color: #f2f2f2;
overflow: hidden;
}
.sliding-text {
animation: slide 5s linear infinite;
}
@keyframes slide {
0% {
margin-left: -100%;
}
100% {
margin-left: 100%;
}
}
在上述代码中,我们创建了一个宽度为300px、高度为50px的文本容器,并设置了背景颜色为#f2f2f2。文本容器内部包含一个带有.sliding-text类的p元素,该类应用了名为slide的动画。
在@keyframes规则中,我们定义了slide动画的关键帧。在0%时,将文本容器的左边距设置为-100%,使文本开始时位于容器的左侧。在100%时,将文本容器的左边距设置为100%,使文本滑动到容器的右侧。
最后,我们将slide动画应用于.sliding-text类,并设置动画的持续时间为5秒,线性的动画曲线,无限重复播放。
这样,当你在浏览器中加载该HTML文件时,文本将从左向右滑动,不断重复播放。
领取专属 10元无门槛券
手把手带您无忧上云