Describe using CSS animation: a ball bounces up and down (duration 2s, executed once)
巴扎黑2017-05-16 13:46:36
Written casually without considering compatibility. You can change the movement speed or something by yourself
<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
伊谢尔伦2017-05-16 13:46:36
I don’t know if this is what you want, I suggest you take a look at css3
jsbin demo