老师，我这个心动的动画为什么动不起来
来源：2-21 自由编程
weixin_慕沐1378591
2020-10-29 18:23:03
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.out{
width: 88px;
height: 81px;
position: relative;
/* background-image: url(./images/xin.png); */
margin: 100px auto;
}
.out .in{
width: 88px;
height: 81px;
position: absolute;
background-image: url(./images/xin.png);
/* animation: xidong 1s linear 0s; */
}
.out .in img{
border: 1px solid #000;
transform: scale(1);
animation: xidong 1s linear 0s infinite;
}
@keyframes xindong{
from{
transform: scale(1);
opacity: 1;
}
to{
transform: scale(5);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="out">
<div class="in">
<img src="./images/xin.png" alt="">
</div>
</div>
</body>
</html>
1回答
-
同学你好，是定义的帧动画名称和使用名字不一致的原因，参考修改
代码中也去掉了多余的border边框，看着更美观一些。
祝学习愉快！
1h020-11-01
相似问题