<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{ margin: 0; padding: 0;}
.box{ 300px;margin: 100px auto; position: relative; border: 1px solid #ccc;}
.wp{ position: absolute; top: 60px; left: 20px; font-weight:bold;">#336699; color: #fff; 50px; z-index: 6}
label{ display: block; line-height: 40px; border-bottom: 1px dashed #ffffff; text-align: center}
.lab_last{ border-bottom: none;}
.view_one{background-image: url("pic/1.jpg"); position: absolute; 300px; height: 300px; background-repeat: no-repeat;}
.view_two{background-image: url("pic/2.jpg"); position: absolute; 300px; height: 300px; background-repeat: no-repeat;}
.view_three{background-image: url("pic/3.jpg"); position: absolute; 300px; height: 300px; background-repeat: no-repeat;}
.box .view{ transition: left 0s .75s; left: 0; top: 0;}
.box input[id^="get_img"]:checked + .view{ left: 0; top: 0; z-index: 4; transition: left 0s .75s;}
</style>
</head>
<body>
<div class="box">
<div class="wp">
<label for="get_img_btn1">风景1</label>
<label for="get_img_btn2">风景2</label>
<label for="get_img_btn3" class="lab_last">风景3</label>
</div>
<input id="get_img_btn1" type="radio" checked="checked" name="pic" >
<span class="view view_one"></span>
<input id="get_img_btn2" type="radio" name="pic">
<span class="view view_two"></span>
<input id="get_img_btn3" type="radio" name="pic">
<span class="view view_three"></span>
</div>
</body>
</html>