<div class="safety-text">
<div class="safety-text-title">今日待审核违章隐患列表</div>
<div class="text-content">
<span class="scroll-text">{{ this.textContent }}</span>
</div>
</div>
.safety-text {
width: 50%;
height: 100%;
.safety-text-title {
width: 100%;
font-size: 16px;
color: #1be7ff;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
}
.text-content {
width: 100%;
height: calc(100% - 40px);
padding: 0 20px;
letter-spacing: 2px;
overflow: hidden;
span {
line-height: 25px;
display: inline-block;
white-space: wrap;
/* 防止文字换行导致错位 */
animation: scrollText 15s linear infinite;
/* 应用动画 */
}
}
}
@keyframes scrollText {
0% {
transform: translateY(0);
/* 初始状态:无偏移 */
}
100% {
transform: translateY(-100%);
/* 终止状态:向左移动整个宽度 */
}
}
css动画文字自动无线滚动
xiaoming49652023-09-14 15:05
相关推荐
江-小北3 分钟前
Java基础面试题04:Iterator 和 ListIterator 的区别是什么?wmd131643067126 分钟前
IDEA插件CamelCase,快速转变命名格式葡萄城技术团队8 分钟前
使用 前端技术 创建 QR 码生成器 API1DN金猿10 分钟前
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)(很详细)鸽鸽程序猿18 分钟前
【前端】javaScript秦时明月之君临天下26 分钟前
React和Next.js的相关内容捂月40 分钟前
Spring Boot 核心逻辑与工作原理详解埋头编程~43 分钟前
【C++】踏上C++学习之旅(十):深入“类和对象“世界,掌握编程黄金法则(五)(最终篇,内含初始化列表、静态成员、友元以及内部类等等)菜鸟起航ing1 小时前
Java中日志采集框架-JUL、Slf4j、Log4j、LogstashNightselfhurt1 小时前
RPC学习