请老师检查
来源:2-21 自由编程
慕UI4313976
2021-03-09 10:26:12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap{
width: 88px;
height: 81px;
position: relative;
background: url(./img/xin.png) no-repeat center center;
}
.heart{
width: 88px;
height: 81px;
position: absolute;
top:50%;
left: 50%;
margin-top: -40px;
margin-left: -44px;
animation: xt 1s ease 0s infinite;
}
@keyframes xt{
from{
opacity: 1;
transform:scale(1)
}
to{
opacity: 0;
transform:scale(2);
}
}
</style>
</head>
<body>
<div class="wrap">
<img src="./img/xin.png" alt="" class="heart">
</div>
</body>
</html>
1回答
同学你好,效果实现是对的,建议优化:可以给div添加margin属性,让整体水平居中显示,效果实现会更好。
祝学习愉快~
相似问题