色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css實現左右鼠標滑動

林晨陽1年前6瀏覽0評論

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屬性的值改為正數就可以了。