CSS 跑马灯
Posted 码小余の博客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 跑马灯相关的知识，希望对你有一定的参考价值。
<!--
* @Author: 码小余
* @Date: 2022-07-23 13:58:36
* @LastEditTime: 2022-07-23 13:59:53
* @FilePath: f:\\前端\\css 跑马灯\\index.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.scroll-content
overflow: hidden;
flex: 1;
height: 24px;
line-height: 24px;
position: relative;
.scroll-text
position: absolute;
white-space: nowrap;
padding-left: 100%;
animation: notice 10s 0s linear infinite both;
font-size: 24px;
font-family: PingFang SC;
font-weight: 500;
color: #757575;
@keyframes notice
100%
transform: translate3d(-100%, 0, 0);
</style>
</head>
<body>
<div class="scroll-content">
<span class="scroll-text"
>我是跑马灯我是跑马灯我是跑马灯我是跑马灯我是跑马灯我是跑马灯</span
>
</div>
</body>
</html>
代码讲解
scroll-content 作为父级容器设置了相对定位（relative）
scroll-text 作为子级容器设置了绝对定位（absolute）
此时 scroll-text 的百分比长度设置就以 scroll-content 的长度为标准了
设置文字一行显示
设置 padding-left: 100% 将文字移到最右侧，此时刚好达到 scroll-content 的右边界
设置动画，从左到右，transform: translate3d(-100%, 0, 0);
实现效果
以上是关于CSS 跑马灯的主要内容，如果未能解决你的问题，请参考以下文章