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
So installieren Sie die Standalone-Version von Spark in einer Linux-Umgebung ohne Verwendung von Hadoop
Das Thema Big Data wird immer wichtiger und wer m...
Implementierungscode für die teilweise Aktualisierung einer HTML-Seite
Aktualisierung der Ereignisantwort: Aktualisierun...
Implementierung der Bindungskonfiguration für duale Netzwerkkarten im Linux-System
Systemversion [root@ ~]# cat /etc/redhat-release ...
Detaillierte Beispiele zur Verwendung der JavaScript-Ereignisdelegierung (Proxy)
Inhaltsverzeichnis Einführung Beispiel: Ereignisd...
Lassen Sie die Webseite automatisch den Hochgeschwindigkeitsmodus des Dual-Core-Browsers aufrufen (Webkit)
Codebeispiel Fügen Sie im Head-Tag eine Codezeile ...
Lösung für den Apache-Cross-Domain-Ressourcenzugriffsfehler
In vielen Fällen platzieren große und mittelgroße...
Vue realisiert kaskadierende Auswahl von Provinzen, Städten und Bezirken
Vor Kurzem musste ich einen kaskadierenden Auswah...
Grundlagen der MySQL-Speicher-Engine
Im vorherigen Artikel haben wir über MySQL-Transa...
So konfigurieren Sie SSH/SFTP und legen Berechtigungen unter dem Linux-Betriebssystem fest
Im Vergleich zu FTP bietet der SSH-basierte SFTP-...
Lösen Sie das Docker.Socket-Berechtigungsproblem des VSCode-Docker-Plugins
Lösung: Beenden Sie alle mit .vscode in Zusammenh...
Proxy_pass-Methode in mehreren if in Nginx-Standorten
1. Lassen Sie uns zunächst das relevante Wissen z...
React verwendet die Upload-Komponente von Antd, um die Funktion zum Senden von Dateiformularen zu implementieren (vollständiger Code).
Ich habe gerade angefangen, React für Projekte zu...
MySQL 8.0.18 Hash Join unterstützt keine Links-/Rechts-Joins. Probleme mit Links- und Rechts-Joins
In MySQL 8.0.18 wurde eine neue Hash-Join-Funktio...
Detailliertes Tutorial zur Installation von InfluxDB in Docker (Leistungstest)
1. Voraussetzungen 1. Das Projekt wurde bereitges...
Detaillierte Erklärung der 10 häufigsten HTTP-Statuscodes
Der HTTP-Statuscode ist ein dreistelliger Code, d...