Maison >interface Web >tutoriel CSS >Effet d'animation de rebond CSS
Effet d'animation de rebond CSS
- 王林avant
- 2023-08-30 22:21:06672parcourir
L'effet d'animation de rebond est utilisé pour que les éléments se déplacent rapidement vers le haut, vers l'arrière ou s'éloignent de la surface après avoir été touchés.
Exemple
Vous pouvez essayer d'exécuter le code suivant pour obtenir l'effet d'animation rebondissante -Live Demo
<html>
<head>
<style>
.animated {
background-image: url(/css/images/logo.png);
background-repeat: no-repeat;
background-position: left top;
padding-top:95px;
margin-bottom:60px;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
40% {-webkit-transform: translateY(-30px);}
60% {-webkit-transform: translateY(-15px);}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
}
</style>
</head>
<body>
<div id="animated-example" class="animated bounce"></div>
<button onclick="myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Créer du texte blanc avec une ombre noire en utilisant CSSArticle suivant：Créer du texte blanc avec une ombre noire en utilisant CSS