css中hover变大效果(拉伤会怎样)

包小可CSS2023-08-06 15:35:047740

html代码：

<p id="body_img">
    <img src="img/11.jpg" alt="">
</p>

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;
            /* 当图片变大超出了外包p后隐藏 */
        }
        #body_img:hover img{
            transition: 1s;
            /* 过度时间 */
            transform: scale(1.1);
            /* 变形一比一放大 */
        }
</style>

思路：先设置一个p包含一张图片设置大小，溢出隐藏（当滑动图片上面后变大隐藏）给图片设置手动鼠标和过度时间。当鼠标滑动p上面让图片变形成一比一放大，外加过度时间

CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）

CSS3的transform:scale()可以实现按比例放大或者缩小功能。

CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。
效果如下图所示：

1、当未鼠标未放到图片上的效果：

css中hover变大效果(拉伤会怎样) 第1张

2、当鼠标放到图片上后(放大的过程是有动画过渡的，这个过渡的时间可以自定义)：

css中hover变大效果(拉伤会怎样) 第2张

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			p{
				width: 300px;
				height: 300px;
				border: #000 solid 1px;
				margin: 50px auto;
				overflow: hidden;
			}
			p img{
				cursor: pointer;
				transition: all 0.6s;
			}
			p img:hover{
				transform: scale(1.4);
			}
		</style>
	</head>
	<body>
		<p>
			<img src="img/focus.png" />
		</p>
	</body>
</html>

其中：

transition: all 0.6s;表示所有的属性变化在0.6s的时间段内完成。

transform: scale(1.4);表示在鼠标放到图片上的时候图片按比例放大1.4倍。

到此这篇关于css中hover变大效果的文章就介绍到这了,更多相关css hover放大内容请搜索酷瑞百科以前的文章或继续浏览下面的相关文章，希望大家以后多多支持酷瑞百科！

☆未收藏(0)

鼠标图片