<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
相关推荐
m0_571957581 小时前
Java | Leetcode Java题解之第543题二叉树的直径并不会1 小时前
常见 CSS 选择器用法悦涵仙子1 小时前
CSS中的变量应用——:root,Sass变量,JavaScript中使用Sass变量衣乌安、1 小时前
【CSS】居中样式兔老大的胡萝卜1 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf低代码布道师1 小时前
CSS的三个重点耶啵奶膘3 小时前
uniapp-是否删除魔道不误砍柴功3 小时前
Java 中如何巧妙应用 Function 让方法复用性更强NiNg_1_2343 小时前
SpringBoot整合SpringSecurity实现密码加密解密、登录认证退出功能闲晨3 小时前
C++ 继承:代码传承的魔法棒,开启奇幻编程之旅