Um mithilfe von CSS einen Fade-Animationseffekt auf einem Bild zu erzielen, können Sie versuchen, den folgenden Code auszuführen:
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 fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
</style>
</head>
<body>
<div id="animated-example" class="animated fadeOut"></div>
<button onclick="myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>Das obige ist der detaillierte Inhalt vonCSS-Animationseffekt zum Ausblenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Wie richte ich WeChat so ein, dass meine Zustimmung erforderlich ist, wenn mich jemand zu einer Gruppe hinzufügt?
Lösung für das Zurücksetzen der Verbindung
Welche Server sind von der Registrierung ausgenommen?
Gründe, warum der Zugriff auf eine Website zu einem internen Serverfehler führt
Was ist der Handel mit digitalen Währungen?
Verwendung der Kalenderklasse in Java
Kosten für die Servermiete
Registrierungsfreier CDN-Beschleunigungsdienst
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
