html5 - 用css動(dòng)畫(huà)方式描述:一個(gè)球彈起落下(持續(xù)時(shí)間2s,,執(zhí)行一次)
問(wèn)題描述
用css動(dòng)畫(huà)方式描述:一個(gè)球彈起落下(持續(xù)時(shí)間2s,,執(zhí)行一次)
問(wèn)題解答
回答1：隨意寫(xiě)的 沒(méi)有考慮兼容 可以自己更改一下運(yùn)動(dòng)速度什么的
<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. golang - 用IDE看docker源碼時(shí)的小問(wèn)題2. 我何時(shí)應(yīng)該在Java中使用JFrame.add（component）和JFrame.getContentPane（）。add（component）3. phpstudy8.1沒(méi)集成mysql-front4. 運(yùn)行python程序時(shí)出現(xiàn)“應(yīng)用程序發(fā)生異常”的內(nèi)存錯(cuò)誤？5. html - css氣泡，實(shí)現(xiàn)“倒三角（不知道算不算三角了）”可透明的。6. 利用IPMI遠(yuǎn)程安裝centos報(bào)錯(cuò)！7. 前端 - @media query 使用出現(xiàn)的問(wèn)題？8. javascript - 請(qǐng)指條明路，angular的$event，在select中卻是undefined？9. html5和Flash對(duì)抗是什么情況？10. 關(guān)docker hub上有些鏡像的tag被標(biāo)記““This image has vulnerabilities””
網(wǎng)公網(wǎng)安備