老师您看下对不?
来源:2-18 编程练习
我不是胖球球
2021-04-27 17:38:53
相关代码:
<!DOCTYPE html>
<html lang="en">
<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: moveDown 1s linear 0.5s alternate infinite;
}
@keyframes moveDown {
0% {
bottom: 30px;
}
50% {
bottom: 12px;
}
100% {
bottom: 18px;
}
}
</style>
</head>
<body>
<div>></div>
</body>
</html>
1回答
同学你好,代码整体是对的,但是打开页面时,箭头会瞬间从顶部到达底部,然后才开始动画。建议优化:
给箭头设置bottom:30px,让箭头一开始就在底部显示,直接开始动画,效果实现会更好。示例:
祝学习愉快~
相似问题