css系列----纯 css 实现轮播图(手动)

2、纯 css 实现轮播图(手动)

实现原理：利用 css3 中 input:checked 和 + ～选择器实现

/* 设置容器大小*/
.container {
   
  position: relative;
  width: 800px;
  height: 300px;
}
/* 设置input位置 */
.container input {
   
  position: absolute;
  z-index: 23;
  bottom: 10px;
}
/* 设置input位置 */
#pic1 {
   
  left: 48%;
}
#pic2 {
   
  left: 50%;
}
#pic3 {
   
  left: 52%;
}
/* 设置图片大小，透明度为0 */
.wrap img {
   
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}
/* 默认选中第一张，根据选中的input，展示对应的图片 */
#pic1:checked ~ .wrap img:nth-of-type(1),
#pic2:checked ~ .wrap img:nth-of-type(2),
#pic3:checked ~ .wrap img:nth-of-type(3) {
   
  opacity: 1;
  animation: showImg linear 1s 1 0s normal;
}
/* 设置图片展示出来时候的动画 */