- communauté
- Apprendre
- Bibliothèque d'outils
- Loisirs
Maison > Questions et réponses > le corps du texte
Décrit à l'aide d'une animation CSS : une balle rebondit de haut en bas (durée 2s, exécutée une fois)
巴扎黑2017-05-16 13:46:36
É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
伊谢尔伦2017-05-16 13:46:36
Je ne sais pas si c'est ce que vous voulez, je vous suggère de jeter un œil à la démo css3
jsbin