纯css图片切换页面效果代码
时间: 2023-12-25 14:01:40 浏览: 39
纯CSS图片切换页面效果可以通过使用CSS动画来实现。下面是一个简单的例子:
HTML代码:
```html
<div class="image-slider">
<input type="radio" name="slide" id="slide-1" checked>
<input type="radio" name="slide" id="slide-2">
<input type="radio" name="slide" id="slide-3">
<div class="slides">
<div class="slide1"></div>
<div class="slide2"></div>
<div class="slide3"></div>
</div>
<div class="controls">
<label for="slide-1"></label>
<label for="slide-2"></label>
<label for="slide-3"></label>
</div>
</div>
```
CSS代码:
```css
.image-slider {
position: relative;
width: 100%;
max-width: 600px;
margin: 0 auto;
}
.slides {
position: relative;
}
.slides > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 300px;
opacity: 0;
transition: opacity 0.5s;
}
#slide-1:checked ~ .slides .slide1,
#slide-2:checked ~ .slides .slide2,
#slide-3:checked ~ .slides .slide3 {
opacity: 1;
}
.controls {
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
}
.controls label {
display: inline-block;
width: 15px;
height: 15px;
background: #333;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
}
#slide-1:checked ~ .controls label:nth-child(1),
#slide-2:checked ~ .controls label:nth-child(2),
#slide-3:checked ~ .controls label:nth-child(3) {
background: #fff;
}
```
这段代码中,我们使用了radio input来控制图片的切换,每个radio input对应一个图片,通过CSS选择器和:checked伪类来控制当前需要显示的图片。同时,添加了一组控制按钮,通过点击按钮来切换不同的图片。这样就实现了纯CSS图片切换页面效果。