网页制作css图片切换

使用CSS动画实现图片切换

通过CSS的@keyframes和animation属性可以实现自动轮播效果。定义一个包含多张图片的容器，设置关键帧控制透明度或位移变化。

<style>
  .slideshow {
    position: relative;
    height: 300px;
    overflow: hidden;
  }
  .slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: slideShow 12s infinite;
  }
  .slide:nth-child(1) { animation-delay: 0s; }
  .slide:nth-child(2) { animation-delay: 4s; }
  .slide:nth-child(3) { animation-delay: 8s; }

  @keyframes slideShow {
    0%, 33% { opacity: 1; }
    34%, 100% { opacity: 0; }
  }
</style>

<div class="slideshow">
  <img class="slide" src="image1.jpg">
  <img class="slide" src="image2.jpg">
  <img class="slide" src="image3.jpg">
</div>

使用:hover伪类切换图片

通过悬停状态改变背景图片或透明度，适合需要交互触发的场景。

.image-container {
  width: 500px;
  height: 300px;
  background-image: url(default.jpg);
  transition: background-image 0.5s;
}
.image-container:hover {
  background-image: url(hover.jpg);
}

使用checkbox hack技术

利用CSS的:checked选择器实现无JavaScript的标签页切换效果。

<style>
  .tabs input { display: none; }
  .tab-content { display: none; }
  #tab1:checked ~ .content1,
  #tab2:checked ~ .content2 {
    display: block;
  }
</style>

<div class="tabs">
  <input type="radio" name="tabs" id="tab1" checked>
  <input type="radio" name="tabs" id="tab2">

  <label for="tab1">图片1</label>
  <label for="tab2">图片2</label>

  <div class="tab-content content1">
    <img src="pic1.jpg">
  </div>
  <div class="tab-content content2">
    <img src="pic2.jpg">
  </div>
</div>

使用CSS Grid实现画廊切换

通过Grid布局结合:target选择器创建可点击缩略图查看大图的效果。

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.full-image {
  display: none;
  grid-column: 1 / -1;
}
.full-image:target {
  display: block;
}

响应式图片切换方案

使用<picture>元素配合媒体查询，根据屏幕尺寸切换不同图片源。

<picture>
  <source media="(min-width: 1024px)" srcset="large.jpg">
  <source media="(min-width: 768px)" srcset="medium.jpg">
  <img src="small.jpg" alt="响应式图片">
</picture>

性能优化建议

优先使用CSS变换（transform）而非布局属性（如margin/left），硬件加速能提升动画流畅度。对图片进行预加载避免切换时的延迟，使用will-change属性提示浏览器优化：

.slide {
  will-change: opacity;
  transform: translateZ(0);
}