<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0;} .box{ width:300px;margin: 100px auto; position: relative; border: 1px solid #ccc;} .wp{ position: absolute; top: 60px; left: 20px; font-weight:bold;">#336699; color: #fff; width: 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; width:300px; height: 300px; background-repeat: no-repeat;} .view_two{background-image: url("pic/2.jpg"); position: absolute; width:300px; height: 300px; background-repeat: no-repeat;} .view_three{background-image: url("pic/3.jpg"); position: absolute; width: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>
时间： 2024-10-06 19:40:25