请老师检查
来源：2-21 自由编程
慕码人2001750
2021-04-17 12:04:13
<!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>心动</title>
<style>
.box {
width: 88px;
height: 81px;
margin: 340px auto;
position: relative;
background: url(/images/xin.png);
}
.box .xd {
width: 88px;
height: 81px;
position: absolute;
animation: boom .75s ease 0s infinite;
}
@keyframes boom {
0% {
opacity: 1;
transform: scale(1)
}
25% {
opacity: 0.75;
transform: scale(1.5)
}
50% {
opacity: 0.5;
transform: scale(2)
}
75% {
opacity: 0.25;
transform: scale(2.5)
}
100% {
opacity: 0;
transform: scale(3);
}
}
</style>
</head>
<body>
<div class="box">
<img src="/images/xin.png" alt="" class="xd">
</div>
</body>
</html>
1回答
-
好帮手慕然然
2021-04-17
同学你好，实现效果是可以的，继续加油，祝学习愉快！
0
相似问题