老师,帮忙看下哪里有错
来源: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>></div>
</body>
</html>
1回答
好帮手慕然然
2021-04-23
同学你好,代码中存在以下几点问题,建议优化一下:
1、箭头位于网页顶部,建议按照任务要求移到页面底部
2、使用@keyframes定义动画时格式有误(少了外层花括号{}),且定义动画代码中translateY拼写有误,如图,
3、动画正常运行时,缺少顿一下的效果
建议参考以下代码修改:
祝学习愉快!
相似问题