老师,帮忙看下哪里有错

来源:2-18 编程练习

慕的地5368065

2021-04-22 22:44:19

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2-9</title>
<style type="text/css">
div {
font-family: Arial;
font-size: 72px;
font-weight: bold;
position: fixed;
right: 0;
left: 0;
width: 30px;
height: 30px;
margin: auto;
transform: rotate(90deg);
/*此处写代码*/
animation:v 3s linear 5s infinite alternate;

}
@keyframes v
from{

transform:translateY(0) rotate(90deg)

}

to{
transform:tranlateY(20px) rotate(90deg)
}
</style>
</head>
<body>
<div>&gt;</div>
</body>
</html>


写回答

1回答

好帮手慕然然

2021-04-23

同学你好,代码中存在以下几点问题,建议优化一下:

1、箭头位于网页顶部,建议按照任务要求移到页面底部

2、使用@keyframes定义动画时格式有误(少了外层花括号{}),且定义动画代码中translateY拼写有误,如图,

http://img.mukewang.com/climg/608239d309e9fc2a06420450.jpg

3、动画正常运行时,缺少顿一下的效果

建议参考以下代码修改:

http://img.mukewang.com/climg/608239dd0944f85c06330730.jpg

祝学习愉快!

0

0 学习 · 15276 问题

查看课程