html5 - 用css動畫方式描述:一個球彈起落下(持續(xù)時間2s,,執(zhí)行一次)
問題描述
用css動畫方式描述:一個球彈起落下(持續(xù)時間2s,,執(zhí)行一次)
問題解答
回答1：隨意寫的 沒有考慮兼容 可以自己更改一下運(yùn)動速度什么的
<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
相關(guān)文章：
1. dockerfile - 為什么docker容器啟動不了？2. javascript - webapp業(yè)務(wù)流程基本一致，多套主題（樣式基本不一樣，交互稍有偏差）管理，并且有不斷有新增主題，該如何設(shè)計(jì)組件化架構(gòu)？3. javascript - ejs支持if else語法嗎4. 請教各位大佬，瀏覽器點(diǎn) 提交實(shí)例為什么沒有反應(yīng)5. macos - mac下docker如何設(shè)置代理6. javascript - 用rem寫的頁面，安卓手機(jī)顯示文字是正常的，蘋果顯示的文字是特別小的是為什么呢7. javascript - 移動端，當(dāng)出現(xiàn)遮罩層的時候，遮罩層里有div是超出高度scroll的，怎么避免滑動div的時候，body跟隨滑動？8. javascript - JS設(shè)置Video視頻對象的currentTime時出現(xiàn)了問題,IE,Edge,火狐,都可以設(shè)置,反而chrom卻...9. 新手 - Python 爬蟲 問題 求助10. javascript - 學(xué)習(xí)網(wǎng)頁開發(fā)，關(guān)于head區(qū)域一段腳本的疑惑
網(wǎng)公網(wǎng)安備