版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_20025577/article/details/81872474
前段时间逛天猫发现了一个动画效果，如图
然后就尝试了一下用css3动画尝试写了一下，代码如下（刚开始学前端，如果有错误大家见谅）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.main {
width: 400px;
height: 400px;
position: relative;
top: 150px;
left: 600px;
overflow: hidden;
}
.img1 {
width: 400px;
height: 400px;
display: block;
/* 商品图片 */
background: url("./img.jpg") no-repeat center top;
}
.img2 {
width: 400px;
height: 400px;
/* 商品图片 */
background: url("./img.jpg") no-repeat center top;
display: inline-block;
position: absolute;
top: 0px;
left: 0px;
opacity: 1;
transform: scale(1);
transition: all 0.5s;
}
.img3 {
width: 60px;
height: 60px;
display: block;
/* 二维码*/
background: url("./img.png") no-repeat;
position: absolute;
bottom: 10px;
right: 10px;
opacity: 0;
transform: scale(0);
transition: all 0.5s;
}
.main:hover .img2 {
opacity: 0;
transform: scale(2);
}
.main:hover .img3 {
opacity: 1;
transform: scale(1);
}
</style>
<body>
<div class="main">
<a href="" class="img1"></a>
<em class="img2"></em>
<i href="" class="img3"></i>
</div>
</body>
</html>