Um mithilfe von CSS einen großen Animationseffekt mit Einblendung links 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 fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@keyframes fadeInLeftBig {
0% {
opacity: 0;
transform: translateY(-2000px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInLeftBig {
-webkit-animation-name: fadeInLeftBig;
animation-name: fadeInLeftBig;
}
</style>
</head>
<body>
<div id="animated-example" class="animated fadeInLeftBig"></div>
<button onclick="myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</head>Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS, um den linken Animationseffekt einzublenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Was sind die gängigen Managementsysteme?
Einführung in die Nutzung von FTP-Servern
So laden Sie Videos von Douyin herunter
HTML-Speicherplatz
So lösen Sie das Problem, dass der Geräte-Manager nicht geöffnet werden kann
DJVU in PDF umwandeln
Welche Schnittstelle ist Audio?
Was ist eine AGP-Schnittstelle?
