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
Backup zwischen MySQL-Datenbank und Oracle-Datenbank importieren
Importieren Sie die aus der Oracle-Datenbank expo...
Einige Dinge, die Sie über den Varchar-Typ in MySQL wissen sollten
Speicherregeln für varchar In Versionen unter 4.0...
Einführung in die Verwendung benutzerdefinierter Datenattribute in HTML- und Plug-In-Anwendungen
Sie werden oft HTML mit Datenattributen sehen. Die...
Konfigurationsskript für den automatischen Ausgleich von Nginx-Cache-Dateien und dynamischen Dateien
nginx Nginx (Engine x) ist ein leistungsstarker H...
Kleine Details der Web-Frontend-Entwicklung
1 Das Select-Tag muss geschlossen sein <select&...
Lösung für FEHLER 1054 (42S22) beim Ändern des Passworts in MySQL 5.7
Ich habe MySQL 5.7 neu installiert. Beim Anmelden...
JavaScript zum Erzielen von Spezialeffekten beim Treppenrollen (jQuery-Implementierung)
Ich glaube, jeder hat JD verwendet. Auf der Homep...
Lösung für das Problem, dass die MySQL-Konfigurationsdatei nicht geändert werden kann (Win10)
Notieren Sie die Probleme, die Sie für andere lös...
Lösungen für häufige Probleme bei der Verwendung von Elasticsearch
1. Die Verwendung mit Redis führt zu Startkonflik...
Der Inhalt des häufig verwendeten Eingabetextfelds wird automatisch vertikal zentriert und der Standardeingabeaufforderungstext ist leer, wenn darauf geklickt wird
Drei Funktionen: 1. Automatische vertikale Zentrie...
Was muss ich tun, wenn ich einen fehlerhaften MySQL-Befehl abbrechen möchte?
Ich habe einen falschen MySQL-Befehl eingegeben u...
Der IE8-Browser wird vollständig mit Webseitenstandards kompatibel sein
<br />Um zu beweisen, dass sein Engagement f...
So beseitigen Sie den zusätzlichen Leerraum am unteren Rand der erstellten Webseite beim Surfen
Beim Erstellen von HTML-Webseiten mit Dreamweaver...
Erstellen Sie einen virtuellen Nginx-Host basierend auf Domänenname, Port und IP
Es gibt drei Arten von virtuellen Hosts, die von ...
Verwendungsanweisungen für den Befehl „Docker Create“
Mit dem Befehl „Docker Create“ können Sie einen C...