html5 - 用css動畫方式描述:一個球彈起落下(持續(xù)時間2s,,執(zhí)行一次)
問題描述
用css動畫方式描述:一個球彈起落下(持續(xù)時間2s,,執(zhí)行一次)
問題解答
回答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
相關(guān)文章：
1. 如何解決docker宿主機無法訪問容器中的服務(wù)？2. springboot - spring-boot-starter-thymeleaf對沒有結(jié)束符的HTML5標(biāo)簽解析出錯3. 正則表達式 - nginx 正則，如何匹配不以/結(jié)尾且不以.xml .html .htm結(jié)尾4. html - css布局問題，背景用用div畫的三角形是否用absolute與z-index來定位與規(guī)定在下方是否是個好方案5. 我 想好好學(xué)精通一門技術(shù)，大家用的走過的路，幫我指點指點唄 讓我少走了彎路和坑的苦 ，自學(xué)，自己摸6. javascript - 求助Angular 跨控制器調(diào)用方法可行嗎?7. 淺談vue生命周期共有幾個階段？分別是什么？8. index.php錯誤，求指點9. Android 高德地圖如何移除添加的某個marker？10. javascript - 函數(shù)聲明和匿名函數(shù)有什么不同？（前端小白求助。。）
網(wǎng)公網(wǎng)安備