前言:新开的一个项目里,要求每个页面正上方都要有滚动播报,所以先用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;
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元素设置下对齐。