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

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

浏览：91日期：2022-12-11 10:09:45

问题描述

用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. 一个走错路的23岁傻小子的提问2. angular.js - angularjs 使用鼠标悬停时，标签一直闪3. c++ - win764位环境下，我用GCC为什么指针占8个字节，而long是4个字节？4. html5 - HTML代码中的文字乱码是怎么回事？5. java - 安卓电视盒子取得了root权限但是不能安装第三方应用，请问该怎么办？6. javascript - SuperSlide.js火狐不兼容怎么回事呢7. android - 安卓activity无法填充屏幕8. python 计算两个时间相差的分钟数，超过一天时计算不对9. python - django 里自定义的 login 方法，如何使用 login_required()10. node.js - 函数getByName()中如何使得co执行完后才return
排行榜
angular.js - angularjs 使用鼠标悬停时，标签一直闪
angular.js - angularjs 使用鼠标悬停时，标签一直闪
1. c++ - win764位环境下，我用GCC为什么指针占8个字节，而long是4个字节？
2. html5 - HTML代码中的文字乱码是怎么回事？
3. 一个走错路的23岁傻小子的提问
4. android - 离线地图的这种列表该怎么实现？
5. node.js - 函数getByName()中如何使得co执行完后才return
6. python - django 里自定义的 login 方法，如何使用 login_required()
7. java - 为什么hibernate查询表集报错?
8. javascript - SuperSlide.js火狐不兼容怎么回事呢
9. android spinner改变下拉弹出的位置
10. python 计算两个时间相差的分钟数，超过一天时计算不对
热门标签