Describe using CSS animation: a ball bounces up and down (duration 2s, executed once)
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
I don’t know if this is what you want, I suggest you take a look at css3jsbin demo
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Written casually without considering compatibility. You can change the movement speed or something by yourself
I don’t know if this is what you want, I suggest you take a look at css3
jsbin demo