html5 - 用css動畫方式描述:一個球彈起落下(持續時間2s,,執行一次)
用css動畫方式描述:一個球彈起落下(持續時間2s,,執行一次)
巴扎黑2017-05-16 13:46:36
隨意寫的 沒有考慮相容 可以自己更改一下運動速度什麼的
<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