63.纯css实现⽂字左右循环滚动效果
前⾔：新开的⼀个项⽬⾥，要求每个页⾯正上⽅都要有滚动播报，所以先⽤css实现⼀下循环滚动效果（后续需要持续播报1分钟以及及时更换内容，可能就要⽤到js了......）
1.⾸先在页⾯确定滚动播报位置及信息
<div class="search-network">
<i class="el-icon-microphone">⼴播栏：</i>
<div id="box">
<span class="animate">滚动播放消息，持续1分钟，如果连续，则及时更新最新消息。</span>
</div>
</div>
2.设置样式
值得注意的是，需要先设置span⽗元素的overflow:hidden、display:inline-block ；
.search-network{
background: @searchFormBgColor;
font-size:15px;
padding:12px 20px;
width: calc(100% - 80px);
margin: 0 auto;
box-shadow: 2px 3px 8px @searchFormShowColor;
css特效文字
margin-bottom: 10px;
color: @formLabelColor;
#box{
display: inline-block;
vertical-align: bottom;
overflow: hidden;
.animate {
padding-left: 20px;
display: inline-block;
white-space: nowrap;
animation: 20s wordsLoop linear infinite normal;
}
@keyframes wordsLoop {
0% {
transform: translateX(200px);
-
webkit-transform: translateX(200px);
}
100% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
}
@-webkit-keyframes wordsLoop {
0% {
transform: translateX(200px);
-webkit-transform: translateX(200px);
}
100% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
}
}
}
3.仔细看还会发现#box的样式⾥，多了：vertical-align: bottom;
因为给inline-block元素设置overflow:hidden 后， 和它相邻的元素就会往下移，所以要对inline-block元素设置下对齐。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。