Rumah >hujung hadapan web >tutorial css >Gunakan CSS untuk memudar dalam kesan animasi besar di sebelah kanan
Gunakan CSS untuk memudar dalam kesan animasi besar di sebelah kanan
- 王林ke hadapan
- 2023-08-31 12:33:03737semak imbas
Untuk mencapai kesan animasi pudar-kanan menggunakan CSS pada imej, anda boleh cuba menjalankan kod berikut −
Contoh
Demo 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: 10s;
animation-duration: 10s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@keyframes fadeInRightBig {
0% {
opacity: 0;
transform: translateX(2000px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInRightBig {
-webkit-animation-name: fadeInRightBig;
animation-name: fadeInRightBig;
}
</style>
</head>
<body>
<div id="animated-example" class="animated fadeInRightBig"></div>
<button onclick="myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</head>Atas ialah kandungan terperinci Gunakan CSS untuk memudar dalam kesan animasi besar di sebelah kanan. 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：Bagaimana untuk menentukan kebergantungan media untuk helaian gaya CSSArtikel seterusnya：Bagaimana untuk menentukan kebergantungan media untuk helaian gaya CSS