好久没上来了,有种小陌生的感觉。
今天就传一个这几天一直在研究的代码吧
单击加号,图片放大,加号变成减号;单击减号,图片变小,减号变加号。
<!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;
}
感觉还是非常萌萌哒的~~