Reines CSS und Flutter realisieren jeweils einen atmenden Lichteffekt (Beispielcode)
|
Beim letzten Mal fragte ein sehr fleißiger Fan, ob es möglich sei, dem Mond einen atmenden Lichteffekt zu verleihen. Da ich kein Bild in der Größe des Mondes finden konnte, habe ich stattdessen Sterne verwendet. Heute hat dieser Blogger reine CSS- und Flutter-Animation verwendet, um dies umzusetzen. Denken Sie daran, zu sammeln und zu lernen
Wenn Sie es testen möchten, finden Sie das Originalbild am Ende des Artikels Umsetzungsprinzip: Reine CSS-Implementierung, der Code lautet wie folgt:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<Titel></Titel>
<Stil>
*{
Rand: 0;
Polsterung: 0;
}
.wickeln{
Breite: 300px;
Höhe: 300px;
Position: relativ;
Rand: 0 automatisch;
Überlauf: versteckt;
}
.img1,
.img2{
Rand oben: 100px;
Breite: 100px;
Position: absolut;
}
.img2{
-Webkit-Animation: Atem 3 Sekunden, unendlicher Wechsel zwischen Ein- und Ausatmen;
Animation: Atem 3 Sekunden, unendliches Ein- und Ausatmen, abwechselnd;
}
@-webkit-keyframes Atem {
0 % {Deckkraft: 0,2;}60 % {Deckkraft: 1;}bis {Deckkraft: 0,2;}
}
@keyframes Atem {
0 % {Deckkraft: 0,2;}60 % {Deckkraft: 1;}bis {Deckkraft: 0,2;}
}
</Stil>
</Kopf>
<Text>
<div Klasse="wrap">
<img src="images/star1.jpg" alt="Grundkarte" class="img1">
<img src="images/star2.jpg" alt="Oben" class="img2">
</div>
</body>
</html>
Dies ist das Ende dieses Artikels darüber, wie Sie mit reinem CSS und Flutter atmende Lichteffekte erzielen (Beispielcode). Weitere Informationen zum Erzielen atmender Lichteffekte mit CSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die folgenden verwandten Artikel weiter. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Implementierung eines einfachen Weihnachtsspiels mit JavaScript
>>: Detaillierte Erklärung des Linux-Befehls unzip
Artikel empfehlen
Eine ausführliche Zusammenfassung der Überlegungen zu MySQL-Zeiteinstellungen
Existiert die Zeit wirklich? Manche Menschen glau...
Einfache Verwendung von temporären MySQL-Tabellen
Temporäre MySQL-Tabellen sind sehr nützlich, wenn...
Zusammenfassung der Nginx-Konfigurationsstandortmethode
Standortabgleichsreihenfolge 1. Übereinstimmung m...
Die letzten zwei Jahre mit User Experience
<br />Es ist nicht länger als zwei Jahre her...
Bringen Sie Ihnen bei, wie Sie in 5 Minuten den Redis-Clustermodus und den Sentinelmodus mit Docker erstellen
Inhaltsverzeichnis 1. Vorbereitung Ziehen Sie das...
Nginx definiert die Zugriffsmethode für Domänennamen
Ich erstelle derzeit Nginx, kann aber nicht über ...
Lösung zum automatischen Neustart von MySQL
Vorwort Kürzlich trat in der Testumgebung ein Pro...
Grafisches Tutorial zur Installation und Konfiguration der MSI-Version von MySQL 8.0.11
In diesem Artikel finden Sie das Installations- u...
So verhindern Sie, dass Iframes in HTML zur Seite springen, und verwenden Iframes, um die WeChat-Webversion in die Seite einzubetten
Ich möchte nur eine kleine Sache machen, die Winf...
Detaillierte Erklärung zur Interpretation der Nginx-Konfigurationsdatei
Die Nginx-Konfigurationsdatei ist hauptsächlich i...
Detaillierte Erklärung der grundlegenden HTML-Tags und -Strukturen
1. HTML-Übersicht 1.HTML: Hypertext Markup Langua...
Beispiel für die Implementierung der Graphql-Schnittstelle in Vue
Hinweis: In diesem Artikel geht es um die grundle...
Designbeispiele für Dropdown-Menüs und Schiebemenüs
Ich habe viele Websites gefunden, die Dropdown- od...
Schritte zum Anpassen des Symbols in Vue
ant-design-vue passt die Verwendung von Ali Iconf...
So erstellen Sie manuell ein neues Image mit Docker
In diesem Artikel wird die Methode zum manuellen ...