How to implement html meteor shower code

How to implement the html meteor shower code: 1. Create an HTML sample file; 2. Add the HTML code as "

..."; 3. Set the css style to ".container {position: relative...}" to achieve.

#The operating environment of this tutorial: Windows 10 system, HTML5 version, Dell G3 computer.

htmlHow to implement the meteor shower code?

Sharing of dynamic meteor shower production code (can be copied directly)

Meteor shower production

Rendering (the meteors are colored, not shown in the screenshot):

Today, I saw a good meteor shower production case in the book. I thought it looked pretty good. I won’t say much about the code and you can save it if you like.

The code is as follows:

html code:

      
  
  一起来看流星雨吧！ -- (●ˇ∀ˇ●) 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  

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

Go and try it!

Recommended study: "HTML Video Tutorial"

The above is the detailed content of How to implement html meteor shower code. For more information, please follow other related articles on the PHP Chinese website!