一个网页中设置两个网页的入口,背景图片hover时变大。

实现效果图:


50%+50%的网页特效

利用hover时图片移动特效实现网页50%+50%的双页面。

<style>
.percent {
width: 100%;
}
.percent .left{
width: 50%;
float:left;
overflow: hidden;
}
.percent .right{
width: 50%;
float:right;
overflow: hidden;
}
div img {
width:100%;
cursor: pointer;
transition: all 0.6s;
}
div img:hover {
transform: scale(1.4);
}
</style>
</head>
<body>
<div class="percent">
<div class="left">
<img src="t.jpg" />
</div>
<div class="right">
<img src="t.jpg" />
</div>
</div>
</body>

补充:图片外box设置font-size:0;可去除上下两图片间的空隙。

相关文章:

  • 2021-06-13
  • 2021-12-05
  • 2021-11-30
  • 2021-05-17
  • 2021-09-02
  • 2021-08-24
  • 2022-12-23
  • 2021-12-08
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-09-04
  • 2022-12-23
  • 2021-06-16
  • 2021-06-02
相关资源
相似解决方案