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
Ausführen von PostgreSQL in Docker und Empfehlung verschiedener Verbindungstools
1 Einleitung PostgreSQL ist ein kostenloses objek...
Eine kurze Erläuterung verschiedener Möglichkeiten zum Übergeben von Parametern beim React-Routing
Die erste Methode zur Parameterübergabe ist die d...
Javascript-Grundlagen: Detaillierte Erklärung der Operatoren und der Flusskontrolle
Inhaltsverzeichnis 1. Betreiber 1.1 Arithmetische...
Geben Sie zwei Zahlen in HTML ein, um Additions-, Subtraktions-, Multiplikations- und Divisionsfunktionen zu realisieren
1. parseFloat()-Funktion Erstellen Sie auf einer ...
Kopieren von JS-Objekten (Deep Copy und Shallow Copy)
Inhaltsverzeichnis 1. Oberflächliche Kopie 1. Obj...
So verhindern Sie mit Nginx die böswillige Auflösung von IP-Adressen
Zweck der Verwendung von Nginx Lassen Sie uns zun...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.6.15 unter Windows 8
MySQL ist eine Datenbank, die mir sehr gefällt. H...
Eine kurze Analyse der Probleme mit JS-Originalwerten und Referenzwerten
Primitive Werte -> primitive Typen Number Stri...
Dieser Artikel hilft Ihnen, den Quellcode von PReact10.5.13 zu verstehen
Inhaltsverzeichnis render.js-Teil create-context....
Detaillierte Analyse von MySQL-Deadlock-Problemen
Vorwort Wenn sich unser Geschäft in einem sehr fr...
Häufig gestellte Fragen zu Docker
Docker ordnet Ports nur IPv6 zu, nicht aber IPv4 ...
Pygame-Code zum Erstellen eines Schlangenspiels
Inhaltsverzeichnis Verwendete Pygame-Funktionen E...
Einführung in semantische XHTML-Tags
Der erste Punkt ist, dass Menschen die Semantik vo...
Übersicht über die Definition der HTC-Komponenten nach IE5.0
Vor der Veröffentlichung von Microsoft IE 5.0 best...
Detailliertes Tutorial zum Upgrade von Zabbix Monitoring 4.4 auf 5.0
1. Zabbix-Backup [root@iZ2zeapnvuohe8p14289u6Z /]...