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 - 一個表和多個表是多對多的關系，該怎么設計2. python 如何實現PHP替換圖片 鏈接3. html5 - iOS的webview加載出來的H5網頁，怎么修改html標簽select的樣式字體？4. 一個mysql聯表查詢的問題5. python如何不改動文件的情況下修改文件的 修改日期6. javascript - git clone 下來的項目 想在本地運行 npm run install 報錯7. mysql主從 - 請教下mysql 主動-被動模式的雙主配置 和 主從配置在應用上有什么區別？8. angular.js - 三大框架react、vue、angular的分析9. python - django 里自定義的 login 方法，如何使用 login_required()10. 主從備份 - 跪求mysql 高可用主從方案
網公網安備