共计 3023 个字符，预计需要花费 8 分钟才能阅读完成。
如果 UI 稿设计了一个单行定宽的款式，对于超过长度的内容，个别都会抉择暗藏并展现省略号
这也是实现起来最简略，最罕用的解决办法
然而在理论需要中，很有可能要求在不扭转布局的状况下，用单行展现超长的文案且不能省略信息
这时候就能够思考，用内容来回滚动来实现上述的成果
一、需要剖析
先看最终成果
文案来回在指定区域内程度滚动，并且在头尾处停留一段时间
同时咱们思考做成通用的 css，所以尽可能的少应用固定值
二、性能实现
1. 根底布局
先结构一个根本款式
- box 作为任意须要蕴含滚动组件 div 的 class，宽度、边框等个性化的 style 都应该在 box 上设置
- scroll-wrap 作为滚动容器的通用 class
-
scroll-item 作为滚动内容的通用 class
// 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> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="box"> <div class="scroll-wrap"> <div class="scroll-item"> 我是结尾，我是两头我是两头我是两头，我是结尾 </div> </div> </div> </body> </html>.box { max-width: 15em; border: 1px solid; } .scroll-wrap { overflow: hidden; white-space: nowrap; }
2. 动效剖析
如何实现来回滚动的成果呢？
其实只有实现内容的的两种状态，再加上 animation 让这两种状态来回切换。如果这两种状态的实现都应用的 雷同的属性，那么切换过程中天然就会加上动画成果
两种状态：
- 「我是结尾」靠左显示
- 「我是结尾」靠右显示
咱们从简略的局部开始实现，先写一个来回切换状态的 animation 动画
.scroll-item {animation: scroll linear 4s alternate infinite;}
@keyframes scroll {
0% {background: red;}
100% {background: yellow;}
}
简略解释一下以后 animation 的属性
- animation-name：所应用的
@keyframes的名称scroll - animation-timing-function：动画的速度曲线，
linear示意匀速 - animation-duration：规定实现动画所破费的工夫为
4s - animation-direction：是否应该轮流反向播放动画，
alternate示意在偶数次会反向播放 - animation-iteration-count：定义动画的播放次数，
infinite示意有限次
animation 定义好了，而后开始实现最要害的局部，头尾靠边显示的两种状态
3. 头尾地位
如果只是单纯的实现其实很简略，间接用 position: absolute，再别离设置 left，right 即可
.scroll-wrap {
overflow: hidden;
white-space: nowrap;
position: relative;
height: 1.4em;
}
.scroll-item {
animation: scroll linear 4s alternate infinite;
position: absolute;
}
@keyframes scroll {
0% {left: 0;}
100% {right:0;}
}
然而因为 left、right 是不同的属性，所以状态扭转过程中并没有动画成果
所以接下来咱们的指标就是：如何用 left 实现 right: 0
思考 position: absolute 是如何实现居中的。就会比拟容易联想到，能够通过 transform 属性来实现咱们想要的成果
@keyframes scroll {
0% {
left: 0;
transform: translateX(0);
}
100% {
left: 100%;
transform: translateX(-100%);
}
}
再给 keyframes 加上两个动画节点，让文案呈现头尾的停留
@keyframes scroll {
0% {
left: 0;
transform: translateX(0);
}
10% {
left: 0;
transform: translateX(0);
}
90% {
left: 100%;
transform: translateX(-100%);
}
100% {
left: 100%;
transform: translateX(-100%);
}
}
看起来曾经比拟完满了？
三、代码优化
回顾咱们最开始定下的指标
并且思考做成通用的 css，所以尽可能的少应用固定值
因为用了 position: absolute，导致须要额定给父元素指定高度。咱们现实的状态应该是
- 内容高度天然撑开
- box 宽度大于内容时，不会产生滚动
- box 宽度由内容撑开
应用咱们现成的计划，只有不呈现上述三种状况时能力失常展现
究其原因，宽高都无奈自适应的起因，次要是由 position: absolute 造成的。所以咱们思考换一个其余计划来实现两种状态。
不过再逐渐阐明一遍就过于繁琐了，这里间接列出最终代码。同时解释一些要害属性
// 个性化局部 ⬇️
.box {
width: 15em;
border: 1px solid;
}
// 通用代码局部 ⬇️
.scroll-wrap {
max-width: 100%;
display: inline-block;
vertical-align: top;
overflow: hidden;
white-space: nowrap;
}
.scroll-item {
animation: scroll linear 4s alternate infinite;
float: left;
}
@keyframes scroll {
0% {
margin-left: 0;
transform: translateX(0);
}
10% {
margin-left: 0;
transform: translateX(0);
}
90% {
margin-left: 100%;
transform: translateX(-100%);
}
100% {
margin-left: 100%;
transform: translateX(-100%);
}
}max-width: 100%：保障本身宽度不超过 boxdisplay: inline-block：目标是让 scroll-wrap 宽度自适应，能够被子元素撑开vertical-align: top：设置完下面的属性之后，inline 会带上 1.x 的行高导致高度过大。设置 top 能够打消float: left：为了让后续的margin-left，transform合乎预期须要设置 floatmargin-left：等效于上一个计划中的 left
成果合乎预期，想扭转布局时。只须要批改 box 即可（例如：「box 不设置宽度」的款式就是定义了 width: auto
至此，咱们胜利用纯 css 实现了超长内容的滚动播放~
