css中hover变大效果
<p>html代码：</p><div class="jb51code"><pre class="brush:xhtml;"><div id="body_img">
<img src="img/11.jpg" alt="">
</div></pre></div>
<p>css代码：</p>
<div class="jb51code"><pre class="brush:css;"><style type="text/css">
*{
margin: 0;
padding: 0;
}
#body_img img{
width: 600px;
height: 320px;
cursor: pointer;
/* 手动鼠标 */
transition: 1s;
/* 过度时间 */
}
#body_img{
width: 600px;
height: 320px;
overflow: hidden;
/* 当图片变大超出了外包div后隐藏 */
}
#body_img:hover img{
transition: 1s;
/* 过度时间 */
transform: scale(1.1);
/* 变形一比一放大 */
}
</style></pre></div>
<p>思路：先设置一个div包含一张图片设置大小，溢出隐藏（当滑动图片上面后变大隐藏）给图片设置手动鼠标和过度时间。当鼠标滑动div上面让图片变形成一比一放大，外加过度时间</p>
<h2>CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）</h2>
<p>CSS3的transform:scale()可以实现按比例放大或者缩小功能。</p>
<p>CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。<br />效果如下图所示：</p>
<p>1、当未鼠标未放到图片上的效果：</p>
<p><img alt="" height="324" src="https://img.jbzj.com/file_images/article/202308/20230806132841.png" width="326" /></p>
<p>2、当鼠标放到图片上后(放大的过程是有动画过渡的，这个过渡的时间可以自定义)：</p>
<p><img alt="" height="322" src="https://img.jbzj.com/file_images/article/202308/20230806132842.png" width="339" /></p>
<p>代码如下：</p>
<div class="jb51code"><pre class="brush:xhtml;"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 300px;
height: 300px;
border: #000 solid 1px;
margin: 50px auto;
overflow: hidden;
}
div img{
cursor: pointer;
transition: all 0.6s;
}
div img:hover{
transform: scale(1.4);
}
</style>
</head>
<body>
<div>
<img src="img/focus.png" />
</div>
</body>
</html></pre></div>
<p>其中：</p>
<p>transition: all 0.6s;表示所有的属性变化在0.6s的时间段内完成。</p>
<p>transform: scale(1.4);表示在鼠标放到图片上的时候图片按比例放大1.4倍。</p>
頁:
[1]