Rumah > Artikel > hujung hadapan web > Kesan animasi lantunan CSS
Kesan animasi lantunan CSS
- 王林ke hadapan
- 2023-08-30 22:21:06649semak imbas
Kesan animasi lantunan digunakan untuk menyebabkan elemen bergerak pantas ke atas, ke belakang atau menjauhi permukaan selepas dipukul.
Contoh
Anda boleh cuba jalankan kod berikut untuk mencapai kesan animasi melantun -Demonstrasi langsung
<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>#🎜Atas ialah kandungan terperinci Kesan animasi lantunan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Buat teks putih dengan bayang hitam menggunakan CSSArtikel seterusnya：Buat teks putih dengan bayang hitam menggunakan CSS