HTML中的左右循環滾動是一種非常實用的功能。通過這種功能，我們可以讓網頁上的信息以一定的規律左右滾動顯示。具體操作代碼如下：
<html>
<head>
<title>左右循環滾動代碼</title>
<style type="text/css">
.scroll{
white-space:nowrap;
width:100%;
height:30px;
overflow:hidden;
position:relative;
font-size:14px;
line-height:30px;
}
.scroll span{
position:absolute;
left:100%;
}
.scroll span.animated{
-webkit-animation-name:scroll;
-webkit-animation-duration:10s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
animation-name:scroll;
animation-duration:10s;
animation-timing-function:linear;
animation-iteration-count:infinite;
}
@-webkit-keyframes scroll{
0%{
left:100%;
}
100%{
left:-100%;
}
}
@keyframes scroll{
0%{
left:100%;
}
100%{
left:-100%;
}
}
</style>
</head>
<body>
<div class="scroll">
<span>第一個信息</span>
<span>第二個信息</span>
<span>第三個信息</span>
<span>第四個信息</span>
<span>第五個信息</span>
</div>
</body>
</html>這段代碼首先通過CSS定義了一個scroll的class，使用white-space屬性將所有信息合并成一行，并且使用position:relative屬性為后續的絕對定位做準備。然后通過JavaScript將每一個信息都按照一定的間隔水平定位在頁面上，并設置每個信息的class為animated用于后續的滾動動畫。在動畫的實現上，我們多次修改left屬性的值以實現信息的左右滾動。
使用這種左右循環滾動的功能能夠讓我們的頁面更加生動有趣，同時也能夠很好的滿足我們在展示信息時的需要。
上一篇vue屏幕點擊事件
下一篇python 輸出a到z