好久没上来了，有种小陌生的感觉。
今天就传一个这几天一直在研究的代码吧
单击加号，图片放大，加号变成减号；单击减号，图片变小，减号变加号。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>泡芙小姐</title> <link rel="stylesheet" type="text/css" href="css/css.css"/> </head> <body id="jiajian"> <div class="tupian"> <img src="img/1.jpg" alt /> </div> <div id="suofang"> <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;
}
.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;
}
.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;
}
#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;
}
感觉还是很萌萌哒的~~
时间： 2024-10-13 05:40:24