脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS教程 > css hover放大

css中hover变大效果

  发布时间：2023-08-06 13:31:13   作者：冰海恋雨   我要评论
先设置一个div包含一张图片设置大小，溢出隐藏（当滑动图片上面后变大隐藏）给图片设置手动鼠标和过度时间,当鼠标滑动div上面让图片变形成一比一放大，外加过度时间

html代码：

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

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>

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

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

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

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

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

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

代码如下：

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

其中：

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

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

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

相关文章

最新评论

关注微信公众号

扫一扫