HTML5左右圖片滑動效果代碼
HTML5提供了豐富的API，可以輕松地實現各種效果。其中左右圖片滑動效果是一個很常見的效果，我們可以使用HTML5和CSS3來實現這個效果。下面是一個簡單的實例，讓我們一起來學習一下。
首先，我們需要準備一些圖片。這里我們將使用兩張圖片，一張是在左邊顯示的圖片，另一張是在右邊顯示的圖片。
<div class="slider">
<div class="slider-wrapper">
<div class="slide">
<img src="left.jpg" />
</div>
<div class="slide">
<img src="right.jpg" />
</div>
</div>
</div>.slider {
width: 100%;
height: 350px;
overflow: hidden;
position: relative;
}
.slider-wrapper {
width: 200%;
height: 350px;
position: absolute;
top: 0;
left: 0;
transition: all 1s ease-out;
}
.slider-wrapper .slide {
float: left;
width: 50%;
height: 350px;
}
.slider-wrapper .slide img {
width: 100%;
}