- Gemeinschaft
- Lernen
- Tools-Bibliothek
- Freizeit
Heim > Fragen und Antworten > Hauptteil
Mit CSS-Animation beschrieben: Ein Ball springt auf und ab (Dauer 2 Sekunden, einmal ausgeführt)
巴扎黑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