html5 - 用css動(dòng)畫方式描述:一個(gè)球彈起落下(持續(xù)時(shí)間2s,,執(zhí)行一次)
問題描述
用css動(dòng)畫方式描述:一個(gè)球彈起落下(持續(xù)時(shí)間2s,,執(zhí)行一次)
問題解答
回答1：隨意寫的 沒有考慮兼容 可以自己更改一下運(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. 點(diǎn)擊頁面就自動(dòng)輸入到mysql.求解2. java - IDEA從SVN檢出項(xiàng)目 并在tomcat上運(yùn)行 求詳細(xì)流程3. node.js - nodejs使用formidable上傳文件問題4. javascript - windos下第一次用Django無法正確創(chuàng)建工程目錄5. node.js - 帶有node_modules目錄的項(xiàng)目，用phpstorm打開速度極慢，怎么解決？6. java - 多叉樹求值，程序高手，算法高手看過來7. javascript - JS用ajax爬取百度外賣店家信息8. android - 安卓做前端，PHP做后臺(tái)服務(wù)器 有什么需要注意的？9. html5 - 有人做過防微信app界面的H5 demo嗎？10. css - 請(qǐng)問B站頂部的模糊半透明導(dǎo)航條是怎么實(shí)現(xiàn)的呢？
網(wǎng)公網(wǎng)安備