1.html部分
<div class="scroll-box">
<p class="scroll-content-item">
<!-- 此处可以放置需要滚动的内容-->
</p>
</div>
2.CSS部分
.scroll-box{
display: flex;
flex-direction: column;
width: 100%;
height: 150px;
overflow: hidden; /*当内容超过,出现滚动条*/
}
.scroll-content-item{
color: #FFFFFF;
font-size: 16px;
animation: run 15s 1s linear infinite;
}
.ns-title{
color: #33ffca;
font-size: 14px;
font-weight: bold;
}
.ns-content{
color: #FFFFFF;
font-size: 12px;
line-height: 35px;
font-weight: 400;
}
@keyframes run {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
20% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
95% {
-webkit-transform: translate3d(0, -350px, 0);
transform: translate3d(0, -350px, 0);
}
100% {
-webkit-transform: translate3d(0, -350px, 0);
transform: translate3d(0, -350px, 0);
}
}
3.示例:
<!-- 创建外部展示容器 -->
<div class="scroll-box">
<p class="scroll-content-item">
<span class="ns-title">(一)查苗补种。</span>
<span class="ns-content"
>小麦出苗后要及时查苗,出现缺苗断垄的地方,开沟补种。</span
>
<br>
<span class="ns-title">(二)因地因苗适时镇压。</span>
<span class="ns-content"
>对于丘陵、山区部分播种偏早、播量偏大的冬前可能旺长麦田,要及时进行深中耕断根或镇压,控旺转壮。</span
>
<br>
<span class="ns-title">(三)化学除草及防控病虫。</span>
<span class="ns-content"
>要根据苗情、冬前气温情况和麦田草害发生种类,选准对路农药,适时开展化学除草。</span
>
<br>
<span class="ns-title">(四)看墒适时节水冬灌。</span>
<span class="ns-content"
>要根据天气条件、整地质量、小麦苗情和土壤墒情合理确定是否进行冬灌。</span
>
<br>
<span class="ns-title">(五)科学防灾减灾。</span>
<span class="ns-content"
>由于今年晚播面积大,冬前弱苗占比高,要注意及早做好小麦防冻准备,一旦冻害发生,要分苗情、分灾情、分区域及时采取早春追肥浇水等补救措施有效应对,把损失降到最低。
</span>
</p>
</div>
<style>
.scroll-box{
display: flex;
flex-direction: column;
width: 100%;
height: 150px;
overflow: hidden; /*当内容超过,出现滚动条*/
}
.scroll-content-item{
color: #FFFFFF;
font-size: 16px;
animation: run 15s 1s linear infinite;
}
.ns-title{
color: #33ffca;
font-size: 14px;
font-weight: bold;
}
.ns-content{
color: #FFFFFF;
font-size: 12px;
line-height: 35px;
font-weight: 400;
}
@keyframes run {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
20% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
95% {
-webkit-transform: translate3d(0, -350px, 0);
transform: translate3d(0, -350px, 0);
}
100% {
-webkit-transform: translate3d(0, -350px, 0);
transform: translate3d(0, -350px, 0);
}
}
</style>