Heim >Web-Frontend >CSS-Tutorial >Verwenden Sie CSS, um einen großen Animationseffekt einzublenden
Verwenden Sie CSS, um einen großen Animationseffekt einzublenden
- WBOYnach vorne
- 2023-08-28 16:49:05841Durchsuche
Um mit CSS einen großen Einblend-Animationseffekt auf einem Bild zu erzielen, können Sie versuchen, den folgenden Code auszuführen:
Beispiel
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: 10s;
animation-duration: 10s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@keyframes fadeInUpBig {
0% {
opacity: 0;
transform: translateY(2000px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInUpBig {
-webkit-animation-name: fadeInUpBig;
animation-name: fadeInUpBig;
}
</style>
</head>
<body>
<div id="animated-example" class="animated fadeInUpBig"></div>
<button onclick="myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS, um einen großen Animationseffekt einzublenden. 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：Verwenden Sie CSS, um einen Tooltip zu erstellen, der angezeigt wird, wenn der Benutzer die Maus über ein Element bewegtNächster Artikel：Verwenden Sie CSS, um einen Tooltip zu erstellen, der angezeigt wird, wenn der Benutzer die Maus über ein Element bewegt