1.html部分
<div class="scroll-box">
<p class="scroll-content-item">
<!-- 此處可以放置需要滾動的內(nèi)容-->
</p>
</div>
2.CSS部分
.scroll-box{
display: flex;
flex-direction: column;
width: 100%;
height: 150px;
overflow: hidden; /*當(dāng)內(nèi)容超過,出現(xiàn)滾動條*/
}
.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.示例:
<!-- 創(chuàng)建外部展示容器 -->
<div class="scroll-box">
<p class="scroll-content-item">
<span class="ns-title">(一)查苗補(bǔ)種。</span>
<span class="ns-content"
>小麥出苗后要及時查苗,出現(xiàn)缺苗斷壟的地方,開溝補(bǔ)種。</span
>
<br>
<span class="ns-title">(二)因地因苗適時鎮(zhèn)壓。</span>
<span class="ns-content"
>對于丘陵、山區(qū)部分播種偏早、播量偏大的冬前可能旺長麥田,要及時進(jìn)行深中耕斷根或鎮(zhèn)壓,控旺轉(zhuǎn)壯。</span
>
<br>
<span class="ns-title">(三)化學(xué)除草及防控病蟲。</span>
<span class="ns-content"
>要根據(jù)苗情、冬前氣溫情況和麥田草害發(fā)生種類,選準(zhǔn)對路農(nóng)藥,適時開展化學(xué)除草。</span
>
<br>
<span class="ns-title">(四)看墑適時節(jié)水冬灌。</span>
<span class="ns-content"
>要根據(jù)天氣條件、整地質(zhì)量、小麥苗情和土壤墑情合理確定是否進(jìn)行冬灌。</span
>
<br>
<span class="ns-title">(五)科學(xué)防災(zāi)減災(zāi)。</span>
<span class="ns-content"
>由于今年晚播面積大,冬前弱苗占比高,要注意及早做好小麥防凍準(zhǔn)備,一旦凍害發(fā)生,要分苗情、分災(zāi)情、分區(qū)域及時采取早春追肥澆水等補(bǔ)救措施有效應(yīng)對,把損失降到最低。
</span>
</p>
</div>
<style>
.scroll-box{
display: flex;
flex-direction: column;
width: 100%;
height: 150px;
overflow: hidden; /*當(dāng)內(nèi)容超過,出現(xiàn)滾動條*/
}
.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>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。