Décrit à l'aide d'une animation CSS : une balle rebondit de haut en bas (durée 2s, exécutée une fois)
Écrit avec désinvolture sans tenir compte de la compatibilité. Vous pouvez modifier la vitesse de déplacement ou quelque chose du genre par vous-même
<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
Je ne sais pas si c'est ce que vous voulez, je vous suggère de jeter un œil à la démo css3jsbin
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Écrit avec désinvolture sans tenir compte de la compatibilité. Vous pouvez modifier la vitesse de déplacement ou quelque chose du genre par vous-même
.Je ne sais pas si c'est ce que vous voulez, je vous suggère de jeter un œil à la démo css3
jsbin