老师看下2-18的编程练习
来源:2-18 编程练习
鱼传奇
2022-03-05 23:12:03
<!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: arrowMove .5s linear 0.5s infinite; } @keyframes arrowMove { /*from {*/ /* bottom: 20px;*/ /*}*/ /*to {*/ /* bottom: 40px;*/ /*}*/ 0% { bottom: 40px; } 20% { bottom: 10px; } 40% { bottom: 20px; } 100% { bottom: 40px; } } </style> </head> <body> <div>></div> </body> </html>
1回答
好帮手慕慕子
2022-03-06
同学你好,页面打开时,箭头会从顶部瞬间移到底部,然后才开始展示动画,建议优化:设置箭头的初始位置
祝学习愉快~
相似问题