Heim > Artikel > Web-Frontend > 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:143280Durchsuche

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

Verwandte Empfehlungen:

PHP-Video-Tutorial zur öffentlichen Wohlfahrtsschulung

CSS-Online-Handbuch

CSS3-Online-Handbuch

Div/CSS-Grafik-Tutorial

CSS3-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!

php css css3 html

Stellungnahme：

Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie füge ich Schatten zu Schriftarten und Elementen in CSS hinzu? Text-Shadow- und Box-Shadow-ImplementierungNächster Artikel：Wie füge ich Schatten zu Schriftarten und Elementen in CSS hinzu? Text-Shadow- und Box-Shadow-Implementierung

In Verbindung stehende Artikel

Mehr sehen