Heim >Web-Frontend >CSS-Tutorial >Verwenden Sie CSS, um den großen Animationseffekt rechts einzublenden
Verwenden Sie CSS, um den großen Animationseffekt rechts einzublenden
- 王林nach vorne
- 2023-08-31 12:33:03737Durchsuche
Um mithilfe von CSS einen Animationseffekt zu erzielen, der nach rechts verblasst, 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 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>Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS, um den großen Animationseffekt rechts 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：So legen Sie Medienabhängigkeiten für CSS-Stylesheets festNächster Artikel：So legen Sie Medienabhängigkeiten für CSS-Stylesheets fest