老师 帮忙看下哪里有问题 效果出来有点奇怪
来源：2-18 编程练习
lcy_18
2021-03-06 14:27:22
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2-9</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
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);
/*此处写代码*/
position: absolute;
left: 50%;
margin-left: -15px;
animation: arrow 1s ease 0s infinite;
}
@keyframes arrow{
from{bottom: 40px;}
to{bottom: 5px;}
}
</style>
</head>
<body>
<div>></div>
</body>
</html>
1回答
-
同学你好，箭头有向左移动的效果。这是因为在垂直方向移动的时候超出了页面，垂直方向出现滚动了滚动条，导致页面内容减少，有向左移动的效果
建议改变下动画中bottom位置，参考
祝学习愉快！
0
相似问题