Rumah > Artikel > hujung hadapan web > Bagaimana untuk melaksanakan kod pancuran meteor html
Bagaimana untuk melaksanakan kod pancuran meteor html
- 藏色散人asal
- 2023-01-04 15:06:253287semak imbas
Cara melaksanakan kod pancuran meteor html: 1. Buat fail sampel HTML 2. Tambah kod HTML sebagai gaya "
..."; 3. Tetapkan gaya css kepada ".container {kedudukan: relatif...}" untuk dicapai.
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi HTML5, komputer Dell G3.
Bagaimana untuk melaksanakan kod pancuran meteor html?
Perkongsian kod pengeluaran pancuran meteor dinamik (boleh disalin terus)
Pengeluaran pancuran meteor
Perenderan (meteor berwarna, tidak ditunjukkan dalam tangkapan skrin):
Hari ini, saya melihat kes pengeluaran hujan meteor yang bagus, saya fikir ia kelihatan agak bagus , anda boleh menyimpannya.
Kodnya adalah seperti berikut:
kod 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>kod 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: '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; }Pergi dan cubalah!
Pembelajaran yang disyorkan: "Tutorial Video HTML"
Atas ialah kandungan terperinci Bagaimana untuk melaksanakan kod pancuran meteor html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!