老师您看下对不?

来源: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>&gt;</div>
</body>

</html>


写回答

1回答

好帮手慕慕子

2021-04-27

同学你好,代码整体是对的,但是打开页面时,箭头会瞬间从顶部到达底部,然后才开始动画。建议优化:

给箭头设置bottom:30px,让箭头一开始就在底部显示,直接开始动画,效果实现会更好。示例:

http://img.mukewang.com/climg/6087dcba09cead9b07260350.jpg

祝学习愉快~

0

0 学习 · 15276 问题

查看课程