鼠标移上图片放大效果总结

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>鼠标移上图片放大效果</title> <link rel="stylesheet" type="text/

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>鼠标移上图片放大效果</title>
	<link rel="stylesheet" type="text/css" href="static/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="icon" type="image/x-icon" href="static/images/icon.ico" />
    <link rel="stylesheet" type="text/css" href="static/style5.css">
    
</head>
<body>
	<div class="pic">
        <img src="static/images/12.jpg">
    </div>
</body>
</html>

*{margin: 0px;padding: 0px;}
.pic{width: 500px;margin: 200px auto;}
.pic img{width: 200px;border-radius: 3px;transition: all 05s;}/* 图片放大过程的秒数*/
.pic:hover img{transform: scale(1.5);}

学到了css3的两个信息属性：transition:指定多少秒或毫秒才能完成 ,transform:将元素旋转，缩放，移动，倾斜等

QQ图片20181230222018.png

批改老师：天蓬老师批改时间：2018-12-31 16:15:33
老师总结：这样的放大镜效果,在电商类中网站非常多的,不过都是在pc端,好好学

鼠标移上图片放大效果总结

热门词条