HTML5-simulierter Taschenlampen-Lichteffekt
Ein sehr realistischer HTML5-simulierter Taschenlampen-Lichteffekt. HTML5 SVG realisiert den besonderen Effekt des Aufleuchtens der Taschenlampe auf dem Boden und das Licht folgt der Bewegung des Mauszeigers.
<html>
<Kopf>
<meta charset="utf-8">
<title>HTML5模擬手電筒照明效果</title>
<Stil>
html, K?rper {
? H?he: 100 %;
? Rand: 0;
}
svg {
? Anzeige: blockieren;
}
</style>
</head>
<body>
<svg width="100%" height="100%"
? xmlns="http://www.w3.org/2000/svg"
? xmlns:xlink="http://www.w3.org/1999/xlink"
>
? <filter id="light">
? ? <!-- Verwischen Sie das Quellbild, um die Bump-Map weniger scharf zu machen -->
? ? <feGaussianBlur stdDeviation="3" result="blurred"></feGaussianBlur>
? ? <!-- Bump-Map basierend auf Alphakanal erstellen -->
? ? <feColorMatrix in="blurred" type="luminanceToAlpha" result="bumpMap"></feColorMatrix>
? ? <!-- Bump-Map für Beleuchtungsfilter verwenden -->
? ? <feDiffuseLighting in="bumpMap" surfaceScale="3" result="light">
? ? ? <fePointLight x="225" y="150" z="30"></fePointLight>
? ? </feDiffuseLighting>
? ? <!-- Komponieren Sie das Beleuchtungsergebnis mit dem Quellbild durch Multiplikation -->
? ? <feComposite in="light" in2="SourceGraphic"
? ? ? Operator="Arithmetik"
? ? ? k1="1" k2="0" k3="0" k4="0">
? ? </feComposite>
? </filter>
? <pattern id="pattern1"
? ? width="450" ??height="300"
? ? patternUnits="userSpaceOnUse"
? >
? ? <image ?xlink:href="img/codepen.jpg"
? ? ? width="450" ??height="300"
? ? ></image>
? </pattern>
? <rect width="100%" height="100%"
? ? fill="url(#pattern1)" filter="url(#light)"
? ></rect>
</svg>
<script>
const svgNode = document.querySelector('svg');
const fePointLightNode = svgNode.querySelector('fePointLight');
svgNode.addEventListener('mousemove', handleMove);
svgNode.addEventListener('touchmove', handleMove);
Funktion handleMove(event) {
? fePointLightNode.setAttribute('x', event.clientX);
? fePointLightNode.setAttribute('y', event.clientY);
}
</script>
<div style="text-align:center;margin:50px 0; Schriftart:normal 14px/24px 'MicroSoft YaHei';">?
</div>
</body>
</html>
Alle Ressourcen auf dieser Website werden von Internetnutzern bereitgestellt oder von gro?en Download-Sites nachgedruckt. Bitte überprüfen Sie selbst die Integrit?t der Software! Alle Ressourcen auf dieser Website dienen nur als Referenz zum Lernen. Bitte nutzen Sie diese nicht für kommerzielle Zwecke. Andernfalls sind Sie für alle Folgen verantwortlich! Wenn ein Versto? vorliegt, kontaktieren Sie uns bitte, um ihn zu l?schen. Kontaktinformationen: admin@php.cn
Verwandter Artikel
Sechs Apps, um Ihren Smartphone -Videos Blockbuster -Spezialeffekte hinzuzufügen
25 Feb 2025
Verwandeln Sie Ihr Smartphone in ein Hollywood -Studio! In diesem Handbuch werden sechs Apps angezeigt, mit denen Sie Ihren Videos spezifische Spezialeffekte und Filter hinzufügen k?nnen, ohne einen Computer zu ben?tigen. Vom Dinosaurier tobend zu vertr?umten Filtern, die Possibili
K?nigreich kommen: Befreiung 2 - Wie man Aqua Vitalis braut
02 Mar 2025
In Kingdom Come: Deliverance 2 ist Alchemie der Schlüssel zum überleben. Basteln Sie potente Tr?nke für Heilung, Buffs und Spezialeffekte, indem sie Zutaten sammeln und pr?zise Rezepte folgen. Das Timing ist entscheidend; Sorgf?ltige Schritte gew?hrleisten die Trankqualit?t und Effektiven
K?nnen HTML5 und CSS3 wirklich Kreise zeichnen?
23 Nov 2024
Kreise mit HTML5 und CSS3 zeichnenDiese Frage untersucht die M?glichkeit, Kreise mit HTML5 und CSS3 zu zeichnen. K?nnen HTML5 und CSS3 ... erstellen?
HTML5 Video RTSP Live -Streams
27 Feb 2025
HTML5 und RTSP Live -Video -Streaming: Eine umfassende Anleitung Nachforschungen der RTSP -Live -Video -Stream -Wiedergabe mit HTML5 zeigt eine Schlüsselbeschr?nkung: HTML5 unterstützt keine RTSP- oder RTMP -Formate nativ. W?hrend das Anzeigen von Standardvideos mit HTML5 gerade ist
Wie kann man Videoquellen in HTML5 dynamisch ?ndern, ohne Probleme mit der Browserkompatibilit?t?
23 Nov 2024
Videoquellen in HTML5 dynamisch ?ndernProblembeschreibungBeim Versuch, Videoquellen in einem HTML5-Tag dynamisch zu ?ndern...
Wie kann ich Tabellenattribute in CSS in HTML5 migrieren?
31 Oct 2024
HTML5-Tabellenattribute Die HTML5-Validierungsfunktion von TransitionVisual Studio identifiziert Cellpadding-, Cellspacing-, Valign- und Align-Attribute als ...
Wie kann ich Roheingaben aus einem HTML5-Zahleneingabefeld abrufen, auch wenn diese ungültig sind?
19 Nov 2024
Abrufen von Roheingaben aus der HTML5-ZahleneingabeIn HTML5 erm?glicht das Element dem Benutzer die Eingabe numerischer Werte....
Wie verstecke ich den Standard-Platzhaltertext im ?Element' von HTML5?
08 Nov 2024
So entfernen Sie den Standard-Platzhaltertext aus dem HTML5-ElementBei Verwendung des HTML5-Eingabeelements mit der Typeinstellung ...
HTML5 und H5: Verst?ndnis der gemeinsamen Verwendung
22 Apr 2025
Es gibt keinen Unterschied zwischen HTML5 und H5, der Abkürzung von HTML5. 1.HTML5 ist die fünfte Version von HTML, die die Multimedia- und interaktiven Funktionen von Webseiten verbessert. 2.H5 wird h?ufig verwendet, um auf HTML5-basierte mobile Webseiten oder -anwendungen zu verweisen, und eignet sich für verschiedene mobile Ger?te.
Hei?e Werkzeuge
HTML5-Canvas-Herzflattern-Animations-Spezialeffekte
Der HTML5 Canvas-Spezialeffekt ?Herzflattern-Animation“ ist eine generierte Animation, die direkt mit einem Browser ge?ffnet werden kann, um ein Herz zu sehen.
Quellcode des H5-Panda-Bounce-Spiels
HTML5 Mobile Panda ist auch ein verrückter Spielquellcode. Spielbeschreibung: Halten Sie den Bildschirm gedrückt, um die St?rke der Panda-Feder anzupassen und zur Steins?ule zu springen. Das Spiel endet, wenn Sie in den Fluss fallen.
HTML5-Valentinstag-Box-Animations-Spezialeffekte
Zeichnen Sie basierend auf SVG Animationen zum ?ffnen von Liebesbox-Geschenken am Valentinstag und Spezialeffekte für Liebesbox-Animationen.
Quellcode des H5 3D Rolling Ball-Spiels
HTML5 cooler 3D-Ball-Rolling-Handyspielcode herunterladen. Spieleinführung: Ein farbiger Ball rollt und die aktuelle Bahn des farbigen Balls wird durch Ziehen mit der Maus oder dem Touchscreen des Mobiltelefons gesteuert. Dies ist ein einfacher und leicht zu bedienender Quellcode für Mobilspiele.