随意写的 没有考虑兼容 可以自己更改一下运动速度什么的
<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>
<div id="app">
<div id="bar">
<!--球-->
</div>
<!--板-->
<div class="barTip">
</div>
</div
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
