实现效果,另外不知道每次延迟0.5s怎么弄。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>animation</title> <style type="text/css"> div{ position: fixed; right: 0; left: 0; bottom: 60px; margin: auto; width: 40px; height: 40px; font-family: yogasans; font-size: 20px; font-weight: bold; line-height: 40px; letter-spacing: 1px; text-align: center; color: #323241; cursor: pointer; transform: rotate(90deg); animation: view 1s linear 0.5s infinite alternate; /*animation-iteration-count: infinite;*/ } @keyframes view{ 0% { bottom: 60px; } 80% { bottom: 40px; } 100% { bottom: 50px; } } </style> </head> <body> <div>></div> </body> </html>
0
收起
正在回答 回答被采纳积分+1
响应式开发与常用框架 2018
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础,既想进阶,又想进军移动端开发,那就来吧,我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等,让你在前端道路上畅通无阻!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星