CSS3新增文本属性实现图片点击切换效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Keywords" content="关键词"> <meta name="Description" content="描述"> <title>CSS3新增文本属性</title> <style> body{ background:#ccc; } #wrap{ width:640px; margin:100px auto; box-shadow:0 10px 5px rgba(0,0,0,.7); position:relative; padding-top:320px; } #wrap>img{ position:absolute;left:0px;top:0px; transition:all 1s; } img{ display:block; } input{ display:none; } label{ border:10px solid #aaa; margin:20px 3px; float:left; opacity:.5; transition:all 1s; } input:checked + label{ border:10px solid #fff; opacity:1; } input ~ img{ opacity:0; transform:scale(1.1); } input:checked + label + img{ opacity:1; transform:scale(1); } </style> </head> <body> <div id="wrap"> <input type="radio" name="checked" id="id1" checked > <label for="id1"> <img src="images/1.jpg" width="100"> </label> <img src="images/1.jpg" width="640" height="320"> <input type="radio" name="checked" id="id2"> <label for="id2"> <img src="images/2.jpg" width="100"> </label> <img src="images/2.jpg" width="640" height="320"> <input type="radio" name="checked" id="id3" > <label for="id3"> <img src="images/3.jpg" width="100"> </label> <img src="images/3.jpg" width="640" height="320"> <input type="radio" name="checked" id="id4" > <label for="id4"> <img src="images/4.jpg" width="100"> </label> <img src="images/4.jpg" width="640" height="320"> <input type="radio" name="checked" id="id5" > <label for="id5"> <img src="images/5.jpg" width="100"> </label> <img src="images/5.jpg" width="640" height="320"> </div> </body> </html>
![](https://images2015.cnblogs.com/blog/734329/201608/734329-20160813113720671-751385477.jpg)
![](https://images2015.cnblogs.com/blog/734329/201608/734329-20160813113732921-402588228.jpg)
![](https://images2015.cnblogs.com/blog/734329/201608/734329-20160813113740062-1446843541.jpg)
![](https://images2015.cnblogs.com/blog/734329/201608/734329-20160813113747015-487447769.jpg)
![](https://images2015.cnblogs.com/blog/734329/201608/734329-20160813113753453-263649701.jpg)