Heim >Web-Frontend >CSS-Tutorial >Verwenden Sie CSS, um Animationseffekte zu starten
Verwenden Sie CSS, um Animationseffekte zu starten
- WBOYnach vorne
- 2023-09-08 16:29:15803Durchsuche
Um mithilfe von CSS einen Erweiterungsanimationseffekt zu erstellen, können Sie versuchen, den folgenden Code auszuführen –
Beispiel
<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 rollOut {
0% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
}
100% {
opacity: 0;
-webkit-transform: translateX(100%) rotate(120deg);
}
}
@keyframes rollOut {
0% {
opacity: 1;
transform: translateX(0px) rotate(0deg);
}
100% {
opacity: 0;
transform: translateX(100%) rotate(120deg);
}
}
.rollOut {
-webkit-animation-name: rollOut;
animation-name: rollOut;
}
<style>
</head>
<body>
<div id = "animated-example" class = "animated rollOut"></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 Animationseffekte zu starten. 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：CSS-RasterzeilenNächster Artikel：CSS-Rasterzeilen