CSS3是一種非常強大的樣式語言,它可以幫助我們實現許多炫酷的效果,其中走馬燈效果就是一個非常流行的效果。下面我們就來介紹如何使用純CSS3實現走馬燈效果。
<style> .container { position: relative; width: 400px; height: 200px; overflow: hidden; margin: 0 auto; } .container ul { position: absolute; top: 0; left: 0; width: 10000px; animation: marquee 10s linear infinite; } .container li { float: left; width: 200px; height: 200px; text-align: center; font-size: 32px; line-height: 200px; background-color: #ccc; margin-right: 10px; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } </style> <div class="container"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div>
以上代碼中,我們通過創建一個class為container的div容器,設置其寬度為400px,高度為200px,overflow為hidden來控制容器大小以及內容是否溢出。然后創建一個ul列表,其寬度設置為10000px,使用animation來設置動畫效果,同時將li列表float到左邊,設置寬高、字體大小等等樣式屬性來完成走馬燈的實現。
最后,我們定義了一個名為“marquee”的動畫,來實現內容的平移。其中0%表示動畫的起始,100%表示動畫的終止,這里我們使用了CSS3的transform屬性來進行位移動畫。通過這樣的設置,就能實現一個純CSS3的走馬燈效果啦!