Heim > Artikel > Web-Frontend > CSS-Bounce-Animationseffekt
CSS-Bounce-Animationseffekt
- 王林nach vorne
- 2023-08-30 22:21:06662Durchsuche
Der Bounce-Animationseffekt wird verwendet, um Elemente schnell nach oben, rückwärts oder von der Oberfläche weg zu bewegen, nachdem sie getroffen wurden.
Beispiel
Sie können versuchen, den folgenden Code auszuführen, um den springenden Animationseffekt zu erzielen –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>Das obige ist der detaillierte Inhalt vonCSS-Bounce-Animationseffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Erstellen Sie mit CSS weißen Text mit schwarzem SchattenNächster Artikel：Erstellen Sie mit CSS weißen Text mit schwarzem Schatten