Maison > Article > interface Web > Comment implémenter le code HTML d'une pluie de météores

Comment implémenter le code HTML d'une pluie de météores

藏色散人original: 2023-01-04 15:06:253283parcourir

Comment implémenter le code HTML de la pluie de météores : 1. Créez un exemple de fichier HTML 2. Ajoutez le code HTML sous la forme "

..."; 3. En définissant le style CSS sur ".container {position : relatif..." }" à réaliser.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version HTML5, ordinateur Dell G3.

Comment implémenter le code html de la pluie de météores ?

Partage dynamique du code de production de pluie de météores (peut être copié directement)

Production de pluie de météores

Rendu (les météores sont colorés, non montrés dans la capture d'écran) :

Comment implémenter le code HTML dune pluie de météores

Aujourd'hui, j'ai vu une bonne production de pluie de météores cas dans le livre, je pense que ça a l'air plutôt bien, je ne dirai pas grand chose sur le code et vous pouvez le récupérer si vous le souhaitez.

Le code est le suivant :

code html :

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

code css :

: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;
}

Allez l'essayer !

Apprentissage recommandé : "Tutoriel vidéo HTML"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Que faire si la référence de style de composant de réaction échoueArticle suivant：Que faire si la référence de style de composant de réaction échoue

Articles Liés

Voir plus