html5 - 用css动画方式描述:一个球弹起落下(持续时间2s,,执行一次)
问题描述
用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
相关文章：
1. mysql - ubuntu开启3306端口失败,有什么办法可以解决？2. php传对应的id值为什么传不了啊有木有大神会的看我下方截图3. extra没有加载出来4. javascript - 微信网页开发从菜单进入页面后，按返回键没有关闭浏览器而是刷新当前页面，求解决？5. mysql - C#连接数据库时一直这一句出问题int i = cmd.ExecuteNonQuery();6. mysql日期类型默认值’0000-00-00’ 报错7. 求救一下，用新版的phpstudy，数据库过段时间会消失是什么情况？8. mysql replace 死锁9. windows - asp.net连接上mysql之后如何调用？比如下面的登录验证功能怎么实现10. android - 安卓做前端，PHP做后台服务器 有什么需要注意的？
网公网安备