css制作幻灯
CSS 制作幻灯片的方法
纯CSS幻灯片
利用CSS动画和关键帧实现自动轮播效果。通过@keyframes定义动画序列，结合animation属性控制播放时长和循环方式。
<div class="slider">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
</div>.slider {
width: 100%;
overflow: hidden;
position: relative;
}
.slide {
width: 100%;
float: left;
animation: slide 10s infinite;
}
@keyframes slide {
0%, 33% { transform: translateX(0); }
33%, 66% { transform: translateX(-100%); }
66%, 100% { transform: translateX(-200%); }
}CSS + HTML 交互式幻灯片
通过复选框或单选框触发幻灯片切换。隐藏的输入控件与相邻兄弟选择器（~）结合，控制不同幻灯片的显示状态。
<input type="radio" name="slider" id="slide1" checked>
<input type="radio" name="slider" id="slide2">
<div class="slides">
<div class="slide">Content 1</div>
<div class="slide">Content 2</div>
</div>.slide {
display: none;
}
#slide1:checked ~ .slides .slide:nth-child(1),
#slide2:checked ~ .slides .slide:nth-child(2) {
display: block;
}响应式设计适配
使用媒体查询调整幻灯片布局和动画参数，确保在不同屏幕尺寸下正常显示。
@media (max-width: 768px) {
.slide {
animation-duration: 15s;
}
}过渡效果增强
通过transition属性添加平滑的切换效果，例如淡入淡出或横向滑动。
.slide {
transition: opacity 0.5s ease;
opacity: 0;
}
input:checked + .slide {
opacity: 1;
}注意事项
- 纯CSS方案适合简单场景，复杂交互需结合JavaScript。
- 确保幻灯片容器设置
overflow: hidden以避免内容溢出。 - 测试不同浏览器的兼容性，尤其是旧版本对CSS动画的支持。
