请问哪里不对?
来源：2-21 自由编程
神知
2021-10-27 11:40:38
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.xin1{
width: 88px;
height: 81px;
margin: 0 auto;
position: relative;
top: 400px;
}
.xin2{
width: 88px;
height: 81px;
position: absolute;
top: 0;
animation:xin 5s linear 0s infinite;
}
@keyframes xin{
form{
opacity: 1;
transform: scale(0);
}
to{
opacity: 0;
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="xin1">
<img src="images/xin.png" />
<div class="xin2">
<img src="images/xin.png" />
</div>
</div>
</body>
</html>
1回答
-
好帮手慕星星
2021-10-27
同学你好，问题如下：
1、关键帧中from写成了form，所以动画没有生效
2、效果图中心是放大的，所以应该设置缩放从1到大一些的值
3、动画时间可以减少一些，看着更贴合效果图
参考修改：
祝学习愉快~
0
相似问题