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. html5 - 有可以一次性把所有 css外部樣式轉為html標簽內style=" "的方法嗎?2. sql語句 - mysql中關聯表查詢問題3. javascript - [js]為什么畫布里不出現圖片呢？在線等4. javascript - 如何將一個div始終固定在某個位置；無論屏幕和分辨率怎么變化；div位置始終不變5. javascript - vscode alt+shift+f 格式化js代碼，通不過eslint的代碼風格檢查怎么辦。。。6. html - vue項目中用到了elementUI問題7. javascript - 有什么比較好的網頁版shell前端組件？8. javascript - iframe 為什么加載網頁的時候滾動條這樣顯示？9. javascript - 這不是對象字面量函數嗎？為什么要new初始化？10. javascript - 原生canvas中如何獲取到觸摸事件的canvas內坐標?
網公網安備