先上代码:

HTML代码

<body>
 
 <input type="radio" name="xxx" id="r1" checked>
   <input type="radio" name="xxx" id="r2">
   <input type="radio" name="xxx" id="r3">
  
<div class="window">
  <div class="pics">
  
  <div class="pic">
    <img src="http://upload-images.jianshu.io/upload_images/1973393-0efd699f46ff0393.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="">
  </div>
  <div class="pic">
    <img src="http://upload-images.jianshu.io/upload_images/1973393-770d4570f227b209.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="">
    
  </div>
  <div class="pic">
    <img src="http://upload-images.jianshu.io/upload_images/1973393-dc6f6e51e1bc867e.gif?imageMogr2/auto-orient/strip" alt="">
  </div>
 </div>
  
</div>  

  <div class="label">
  <label for="r1">1</label>
  <label for="r2">2</label>
  <label for="r3">3</label>
  </div>
</body>
CSS代码:
div.window {
  width:200px;
  height:200px;
  background:#ddd;
  overflow:hidden;
}

.pics {
  width:600px;
 
  display:flex;
  
}

.pic {
  width:200px;
  height:200px;
}

.pic:nth-child(1){
  
  background:purple;
}

.pic:nth-child(2) {
  
  background:pink;
  
}

.pic:nth-child(3) {
  
  background:#999;
  
}

[name=xxx] {
  
  display:none;
}


[name=xxx]:nth-child(1):checked ~ .window .pics {
  transform:translateX(0);
  
} 

[name=xxx]:nth-child(2):checked ~ .window .pics {
  transform:translateX(-200px);
  
} 

[name=xxx]:nth-child(3):checked ~ .window .pics {
  transform:translateX(-400px);
  
} 

div.label {
  width:200px;
  height:100px;
  margin-top:20px;
  text-align:center;
  
}

label {
  
  border:1px solid #ccc;
  text-align:center;
  padding:5px 12px;
  border-radius:20px;
   
}


.pics {
  transform:all 1s;
}

效果

标签: none

添加新评论