Heim >Web-Frontend >CSS-Tutorial >Das Bild der CSS3-Animation @keyframes wird größer, kleiner und die Farbe ändert sich
Das Bild der CSS3-Animation @keyframes wird größer, kleiner und die Farbe ändert sich
- 青灯夜游nach vorne
- 2018-10-10 16:45:143438Durchsuche
Als ich an der offiziellen Website des Unternehmens arbeitete, half ich auch beim Schreiben einiger statischer Seiten für das Spiel. Um eine Schaltfläche hervorzuheben, musste sie sich farblich ändern und größer und kleiner werden. Dann habe ich gesucht Im Internet habe ich für die Atemlampe und andere Fälle ein kleines Damo geschrieben, das ein bisschen magisch aussieht.
html:
<body>
<p class="color"></p>
<img class="change" src="img/dongtai.png"/>
</body>Das Prinzip ist wie folgt: Körper wird relativ positioniert, .change wird absolut über .color positioniert, die Größe ist die gleiche wie .color, die erste Aktualisierung zeigt .color an Zuerst ändert sich die Transparenz der Änderung, und gleichzeitig ändern sich auch die Größen von .color und .change sind von Breite: 308px, Höhe 202px - ->Änderung zu Breite 358px, Höhe 174px.
Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter
CSS3-Video-Tutorial!
PHP-Video-Tutorial zur öffentlichen WohlfahrtsschulungCSS3-Spezialeffekt-Codesammlung
Das obige ist der detaillierte Inhalt vonDas Bild der CSS3-Animation @keyframes wird größer, kleiner und die Farbe ändert sich. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!