Heim > Artikel > Web-Frontend > CSS, um den Animationseffekt fallender Blätter zu erzielen
Zweck:
Um den rotierenden und fallenden Effekt gefallener Blätter zu erzielen.
(Teilen von Lernvideos: CSS-Video-Tutorial)
Der Code lautet wie folgt:
HTML-Code:
<div class="con"> <img src="img/yeluobig.png" id="yeluobig"/> <img src="img/yeluolit1.png" id="yeluolit1"/> <img src="img/yeluolit2.png" id="yeluolit2"/> </div>
css-Code:
#yeluobig{position: absolute;top: 29%;left: 30%; -webkit-animation:luo 8s infinite linear; animation:luo 8s infinite linear;} #yeluolit1{position: absolute;top: -2%;left: 40%; -webkit-animation:luo 8s infinite 2s linear; animation:luo 8s infinite 2s linear;} #yeluolit2{position: absolute;top: -2%;left: 50%; -webkit-animation:luo 8s infinite 4s linear; animation:luo 8s infinite 4s linear;} @-webkit-keyframes luo{ 0%{top: -1%;transform:rotate(-60deg);} 100%{top: 100%;transform:rotate(60deg);} } @keyframes luo{ 0%{top: -1%;transform:rotate(-60deg);} 100%{top: 100%;transform:rotate(60deg);} }
Beispielcode und Bilder:
Verwandte Empfehlungen: CSS-Tutorial
Das obige ist der detaillierte Inhalt vonCSS, um den Animationseffekt fallender Blätter zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!