Um mit CSS einen großen Einblend-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 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!
Wie man Bilder in ppt scrollen lässt
So erhalten Sie ein Token
Attributverwendung
Empfohlene Tools zur Festplattenerkennung
So ändern Sie Pycharm auf Chinesisch
So lösen Sie das Problem des langsamen Downloads von Baidu Netdisk
Was soll ich tun, wenn eDonkey Search keine Verbindung zum Server herstellen kann?
Einführung in die Verwendung des gesamten VBS-Codes
