您的位置：首页技术文章
文章详情页

html5 - 用css动画方式描述:一个球弹起落下(持续时间2s,,执行一次)

更多 QQ空间 微信 QQ好友 腾讯朋友 复制链接
【字号：大 中 小】日期：2022-12-11 10:09:45浏览：69作者：猪猪

问题描述

用css动画方式描述:一个球弹起落下(持续时间2s,,执行一次)

问题解答

回答1：

随意写的 没有考虑兼容 可以自己更改一下运动速度什么的

<style>#app{ width: 300px; height:400px; border: 1px solid #d6e9c6; position: relative;}.barTip{ width: 100px; height: 10px; background: red; position: absolute; top: 130px; left: 32%;}#bar{ position: absolute; width: 30px; height:30px; background: #2a6496; border-radius: 15px; left: 45%; animation-name:myfirst; animation-duration:2s; animation-timing-function:linear; /*animation-delay:2s;*/ animation-iteration-count:1; animation-direction:alternate; animation-play-state:running;}@keyframes myfirst{ 0% { top:0px;} 10% { top:20px;} 20% { top:40px;} 30% { top:60px;} 40% { top:80px;} 50% { top:100px;} 60% { top:80px;} 70% { top:60px;} 80% { top:40px;} 90% { top:20px;} 100% { top:0px;}} </style></head><body><p id='app'> <p id='bar'><!--球--> </p> <!--板--> <p class='barTip'> </p></p回答2：

不知道你是不是要这样，建议你还是看一下css3jsbin demo

标签： Html5
上一条：javascript - table td单元格生成tr问题下一条：javascript - html2canvas，实现截图，图片跨域问题。
相关文章：
1. javascript - 读js权威指南“作为值得函数”产生了疑惑，求释疑2. 请问带渐变背景的进度条如何实现？求给点思路3. file - Python如何读文件内容修改后写回原文件4. python中merge后文件莫名变得非常大5. javascript - 为什么 process.stdin 会有 write 方法◔ ‸◔?6. boostrap怎么在移动端不显示sidebar？7. android - 使用listview加载不同item，数据填充错误。8. python3.x - python中的虚拟环境怎样设置一直处于激活状态9. java - 怎么处理前台要展示，但是数据库表没有该字段的实体类冗余属性呢？10. mysql - 数据库建字段，默认值空和empty string有什么区别 110
排行榜
请问带渐变背景的进度条如何实现？求给点思路
请问带渐变背景的进度条如何实现？求给点思路
1. javascript - 读js权威指南“作为值得函数”产生了疑惑，求释疑
2. boostrap怎么在移动端不显示sidebar？
3. python3.x - python中的虚拟环境怎样设置一直处于激活状态
4. python中merge后文件莫名变得非常大
5. javascript - 为什么 process.stdin 会有 write 方法◔ ‸◔?
6. android - 使用listview加载不同item，数据填充错误。
7. file - Python如何读文件内容修改后写回原文件
8. java - 怎么处理前台要展示，但是数据库表没有该字段的实体类冗余属性呢？
9. 前端需要设置 token的吗？
10. mysql - 数据库建字段，默认值空和empty string有什么区别 110
热门标签