放大改进版~

来源：互联网发布：java和前端哪个招的多编辑：程序博客网时间：2024/06/05 22:48

单击放大，鼠标移至图片图片也放大。

<!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;}

1 0