CSS實現左右鼠標滑動非常簡單,只需要利用CSS3的transition和transform屬性就可以實現。
首先,我們可以給需要滑動的內容添加一個外層div,然后把需要滑動的內容放在內層div中:
<div class="slider"> <div class="content"> <!-- 需要滑動的內容 --> </div> </div>
接著,我們可以給外層div設置一個寬度和高度,并設置overflow為hidden,隱藏掉內容的超過部分。
.slider { width: 500px; height: 300px; overflow: hidden; }
然后,我們可以給內層div設置一個很長的寬度,并利用CSS3的transition和transform屬性實現左右滑動:
.content { width: 2000px; transition: transform 1s; } .slider:hover .content { transform: translateX(-500px); }
這里,我們設置.content的寬度為2000px,然后把它向左平移500px,就可以讓第一部分的內容顯示出來了。
當鼠標移動到外層div上時,我們利用:hover偽類選擇器來觸發動畫,把.content的transform屬性設置為translateX(-500px),就可以讓內容向左滑動了。
如果我們需要讓內容向右滑動,只需要把transform屬性的值改為正數就可以了。
上一篇css實現圓角的方法
下一篇css實現左側寬度固定