放大改进版~
单击放大，鼠标移至图片图片也放大。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>泡芙小姐</title> <link rel="stylesheet" type="text/css" href="css/ccc.css"/> </head> <body id="jiajian"> <div class="tupian"> <img src="img/1.jpg" alt /> </div> <div id="jiajian"> <a href="#jiajian" id="jian" class="fang">+</a> <a href="#" id="jia" class="suo">-</a> </div> </body> </html>
css
*{
padding: 0;
margin: 0;
border: none;
}
.suo{
position: fixed;
left: 47%;
bottom: 10%;
text-decoration: none;
color: #fff;
background-color: rgba(0,0,0,.5);
width: 60px;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 50px;
}
.fang{
position: fixed;
left: 47%;
bottom: 10%;
text-decoration: none;
color: #fff;
background-color: rgba(0,0,0,.5);
width: 60px;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 50px;
}
.tupian{
width: 658px;
height: 548px;
border: 3px solid #666;
box-shadow: 0px 0px 10px 0 rgba(0,0,0,.8);
margin: 50px auto;
position: relative;
overflow: hidden;
cursor: pointer;
}
.suofang{
text-decoration: none;
color: #fff;
background-color: rgba(0,0,0,.5);
width: 60px;
height: 30px;
text-align: center;
line-height: 30px;
display: inline-block;
position: absolute;
left: 658px;
bottom: -30px;
font-size: 50px;
}
.tupian img{
transition: all .5s;
}
.tupian:hover img {
transform: scale(1.5);
}
#jiajian:target img{
transition: all .5s;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}
#jian{
display: block;
}
#jia{
display: none;
}
#jiajian:target #jian{
display: none;
}
#jiajian:target #jia{
display: block;
}