Native JS realisiert den besonderen Effekt der Verbreitung von Liebe durch Mausbewegungen
|
In diesem Artikel wird ein JS-Spezialeffekt vorgestellt, bei dem Liebe verbreitet wird, wenn die Maus darüber gleitet. Der Effekt ist wie folgt:
Nachfolgend sehen Sie die Code-Implementierung. Sie können diese gerne kopieren, einfügen und sammeln.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Natives JS zum Erreichen des Maus-Gleiteffekts</title>
<Stil>
* {
Rand: 0;
Polsterung: 0;
Schriftfamilie: „Microsoft YaHei“, serifenlos;
}
Körper {
Höhe: 100vh;
Hintergrund: #000;
Überlauf: versteckt;
}
Spanne {
Position: absolut;
Hintergrund: URL (Herz.png);
Zeigerereignisse: keine;
Breite: 100px;
Höhe: 100px;
Hintergrundgröße: Abdeckung;
transformieren: übersetzen(-50 %, -50 %);
Animation: 2 s linear unendlich animieren;
}
@keyframes animieren {
0% {
transformieren: übersetzen(-50 %, -50 %);
Deckkraft: 1;
Filter: Farbton-Drehung (0 Grad);
}
100 % {
transformieren: übersetzen(-50 %, -1000 %);
Deckkraft: 0;
Filter: Farbton-Drehung (360 Grad);
}
}
</Stil>
</Kopf>
<Text>
<Skript>
document.addEventListener('Mausbewegung', (e) => {
let body = Dokument.QuerySelector('body')
lass Herz = document.createElement('span')
sei x = e.offsetX
sei y = e.offsetY
Herz.Stil.links = x + 'px'
Herz.Stil.oben = y + 'px'
lass Größe = Math.random() * 100
Herz.Stil.Breite = Größe + 'px'
Herz.Stil.Höhe = Größe + 'px'
body.appendChild(Herz)
setzeTimeout(() => {
Herz.entfernen()
}, 3000)
})
</Skript>
</body>
</html>Das Folgende ist das Bild heart.png, das im obigen Code eingeführt wurde
Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Docker verwendet Supervisor zur Verwaltung von Prozessvorgängen
>>: So fahren Sie MySQL sicher herunter
Artikel empfehlen
Installieren Sie MySQL offline mit RPM unter CentOS 6.4
Verwenden Sie das RPM-Installationspaket, um MySQ...
Einführung in die Verwendung von Alt- und Titelattributen von HTML-Img-Tags
Wenn Browser-Anbieter die Standards umgehen und ei...
Lösung für Überlauf: versteckter Fehler in CSS
Ursache des Fehlers Als ich heute ein Karussell s...
MySQL-Backup-Tabellenvorgang basierend auf Java
Der Kern ist mysqldump und Runtime Der Vorgang is...
Detailliertes Beispiel für JavaScript-Array-Methoden
Inhaltsverzeichnis Einführung Erstellen eines Arr...
9 Tipps für das Webseiten-Layout
<br />Verwandte Artikel: 9 praktische Vorsch...
Beispiel für das Hinzufügen eines Musikvideos zu einer HTML-Seite
1. Video-Tag Unterstützt die automatische Wiederg...
So ändern Sie den Punkt im WeChat-Applet Swiper-Dot in einen Slider
Inhaltsverzeichnis Hintergrund Zieleffekt Ideen e...
Textbereich Textbereich Breite und Höhe Breite und Höhe Automatische Anpassung Implementierungscode
Code kopieren Der Code lautet wie folgt: <HTML...
Detaillierte Erläuterung der ActiveMQ-Bereitstellungsmethode in der Linux-Umgebung
Dieser Artikel beschreibt die Bereitstellungsmeth...
So ziehen Sie das Docker-Image herunter, um die Version anzuzeigen
Um die Version und das Tag des Bildes anzuzeigen,...
So vergleichen Sie zwei Datenbanktabellenstrukturen in MySQL
Während des Entwicklungs- und Debugging-Prozesses...
Ein einfaches Beispiel für die MySQL-Suche nach Daten im Umkreis von N Kilometern
Gemäß dem Koeffizienten von Pi und dem Radius der...
MySQL Deep Paging (wie man schnell Millionen von Daten paginiert)
Inhaltsverzeichnis Vorwort Fall Optimierung Zusam...
XHTML 1.0-Referenz
Nach Funktion sortierenNN: Gibt an, welche frühere...