So implementieren Sie den HTML-Meteorschauercode: 1. Erstellen Sie eine HTML-Beispieldatei. 2. Fügen Sie den HTML-Code als „
..." 3. Durch Festlegen des CSS-Stils auf ".container {position: relative..." }" zu erreichen.Die Betriebsumgebung dieses Tutorials: Windows 10-System, HTML5-Version, Dell G3-Computer.
Wie implementiert man den HTML-Meteorschauercode?
Dynamisches Teilen des Meteorschauer-Produktionscodes (kann direkt kopiert werden)
Meteorschauer-Produktion
Rendering (die Meteore sind farbig, im Screenshot nicht dargestellt):
Heute habe ich eine gute Meteorschauer-Produktion gesehen Im Fall des Buches finde ich, dass es ziemlich gut aussieht, ich werde nicht viel über den Code sagen und Sie können ihn sammeln, wenn Sie möchten.
Der Code lautet wie folgt:
HTML-Code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>漫天流星雨</title> <link rel="stylesheet" type="text/css" href="index.css"/> </head> <body> <div class="channel"> <!--嗯,这行下面的字可以改变--> 一起来看流星雨吧! -- (●ˇ∀ˇ●) </div> <div class="container"> <div class="line" style="--color:#ec3e27;--x:3;--z:3;--d:1;"></div> <div class="line" style="--color:#fff;--x:3;--z:2;--d:2;"></div> <div class="line" style="--color:#fff;--x:4;--z:1;--d:3;"></div> <div class="line" style="--color:#fd79a8;--x:4;--z:0;--d:1;"></div> <div class="line" style="--color:#fff;--x:6;--z:-1;--d:2;"></div> <div class="line" style="--color:#0984e3;--x:6;--z:-2;--d:3;"></div> <div class="line" style="--color:#fff;--x:8;--z:-3;--d:1;"></div> <div class="line" style="--color:#fff;--x:10;--z:-4;--d:2;"></div> <div class="line" style="--color:#fff;--x:12;--z:-5;--d:3;"></div> <div class="line" style="--color:#fff;--x:14;--z:-6;--d:1;"></div> <div class="line" style="--color:#fff;--x:16;--z:-7;--d:2;"></div> <div class="line" style="--color:#fff;--x:18;--z:-8;--d:3;"></div> <div class="line" style="--color:#e056fd;--x:20;--z:-9;--d:1;"></div> </div> </body> </html>Nach dem Login kopierencss-Code:
:root { --background-color: #2c3e50; --border-color: #7591AD; --text-color: #34495e; --color1: #ec3e27; --color2: #fd79a8; --color3: #0984e3; --color4: #00b894; --color5: #fdcb6e; --color6: #e056fd; --color7: #F97F51; --color8: #BDC581; } * { margin: 0; padding: 0; } html { font-size: 14px; } body { width: 100vw; height: 100vh; background-color: var(--background-color); display: flex; justify-content: center; align-items: center; /* font-family: 'Times New Roman', Times, serif; */ } .channel { position: absolute; width: 80%; text-align: center; top: 50%; left: 50%; transform: translate(-50%, -200px); font-size: 30px; font-weight: bold; color: #fff; z-index: 999; } .container { position: relative; width: 100vw; height: 100vh; background-color: #000; overflow: hidden; display: flex; justify-content: center; align-items: center; perspective: 800px; /* perspective-origin: left bottom; */ transform-style: preserve-3d; } .line { position: absolute; width: 200px; height: 3px; border-radius: 3px; /* background-color: #fff; */ background-image: linear-gradient(to right, var(--color), #ffffff50, transparent); animation: down 1s linear infinite both; animation-delay: calc(var(--d) * 0.3s); } .line::before, .line::after { position: absolute; content: ""; width: inherit; height: inherit; background-image: inherit; } .line::before { filter: blur(5px); } .line::after { filter: blur(10px); } @keyframes down { 0% { transform: translateY(calc(var(--z) * 60px)) translateZ(calc(var(--z) * 100px)) rotate(-45deg) translateX(calc(var(--x) * 100px)); } 100% { transform: translateY(calc(var(--z) * 60px)) translateZ(calc(var(--z) * 100px)) rotate(-45deg) translateX(calc(var(--x) * -100px)); } } .channel{ background: linear-gradient(to right,red,blue); -webkit-background-clip: text; color: transparent; }Nach dem Login kopierenProbieren Sie es aus!
Empfohlenes Lernen: „HTML-Video-Tutorial“
Das obige ist der detaillierte Inhalt vonSo implementieren Sie HTML-Meteorschauercode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!