html - 具有延迟和外观的水平滚动文本问题
问题描述
当我在第二个文本上添加动画延迟时,第一个文本不会移动。而且我没有成功地进行文本滚动的无限循环。动画结束时总会有一些断点。
我尝试了几个在网上找到的代码,但没有一个完全符合我的要求。
.scroll span {
font-size: 1.5em;
animation: scroll 20s linear infinite;
position: absolute;
top: 92vh;
white-space: nowrap;
overflow: hidden;
}
.second span {
animation-delay: 10s;
}
@keyframes scroll {
0% {
transform: translate(-100%, 0);
}
100% {
transform: translate(100%, 0);
}
}
<div>
<p class="scroll first"><span>scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down </span></p>
<p class="scroll second"><span>scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down </span></p>
</div>
我只想要一个无限滚动的文本。
解决方案
您的第二个动画有延迟的原因是因为您将动画设置为从 -100% 到 100%,这基本上是 2 个动画周期。因此,您的动画中会出现大约 1 个周期的空白中断。把它想象成一个圆圈移动的文本。从 -100% 到 0,文本在屏幕上移动,但从 0 到 100%,文本在屏幕外绕回起点。你的动画应该是从 -100% 到 0。
您还需要添加display: inline-block
和padding-left: 100%
以.scroll span
将 2 个span
标签并排放置。
.scroll {
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
position: absolute;
font-size: 1.5em;
position: absolute;
top: 92vh;
white-space: nowrap;
}
.scroll span {
display: inline-block;
padding-left: 100%;
animation: scroll 20s linear infinite;
}
.second span {
animation-delay: 10s;
}
@keyframes scroll {
0% {
transform: translate(-100%, 0);
}
100% {
transform: translate(0, 0);
}
}
<div>
<p class="scroll">
<span>scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down </span>
</p>
<p class="scroll second">
<span> scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down </span>
</p>
</div>
推荐阅读
- php - 将 Dockerfile 从 php:7.2-fpm 更新为 php:7.3-fpm 时出错
- spring-boot - 如何在 Spring Boot 应用程序中处理传入的 webhook
- asp-classic - 如何访问 global.asa 文件中的会话变量
- javascript - 当我点击 select2 输入时键盘关闭
- javascript - Firebase goOffline() 过早触发
- c# - 在 MVC 页面上显示(剑道)对话框,带有多个提交按钮
- css - 某些 CSS 样式未在 Firefox、Safari 或 Chrome 中应用
- bash - 删除bash目录中文件名开头的数字
- pandas - 如何修复“工作簿析构函数中捕获的异常。工作簿可能需要显式关闭()。”
- python - 将 mypy 的通用 self 与 python2 类型注释一起使用