So implementieren Sie HTML-Meteorschauercode

藏色散人
Freigeben: 2023-01-04 15:06:42
Original
3284 Leute haben es durchsucht

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.

So implementieren Sie HTML-Meteorschauercode

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):

So implementieren Sie HTML-Meteorschauercode

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 kopieren

css-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: &#39;Times New Roman&#39;, 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 kopieren

Probieren 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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage