Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Das Bild der CSS3-Animation @keyframes wird größer, kleiner und die Farbe ändert sich

青灯夜游
Freigeben: 2018-10-10 16:45:14
nach vorne
3396 Leute haben es durchsucht

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:cnblogs.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage