当前位置：首页 > 技术博客 > 极简的美感和深色调的HTML单页

极简的美感和深色调的HTML单页

2个月前 (04-27)技术博客288


专注于干净、极简的美感和深色调，给人一种未来主义或技术驱动的氛围。以下是元素的细分：

  1. 排版和品牌：

    • 标题“Eclipx”以粗体无衬线大字突出显示，暗示着强大、有影响力的品牌形象。

    • 标语 “The world's best platform” 传达了关于该平台的雄心勃勃、自信的声明，尽管除非有具体功能支持，否则它可能被视为有点过分承诺。

    • 使用“EclipxOS + React”表明该平台由自定义作系统 EclipxOS 提供支持，并使用 React 构建，表明了现代技术堆栈。

  2. 色彩和视觉效果：

    • 背景采用深色主题和类似太空的视觉效果（例如，星星、发光的光源），这可能意味着专注于创新或探索新领域。

    • 渐变和光效（例如，山脉周围的光芒和文本）的使用赋予了它一种高科技、精致的感觉。

    • 中央的黑色圆圈可能象征着日食，强化了创新、神秘或揭示新事物的主题。

源代码

<!DOCTYPE html>    
<html lang="en">    
<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<title>www.liuzhixi.cn</title>    
<style>    
*{ box-sizing: border-box; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth;}    
html, body { height: 100%; }    
html::-webkit-scrollbar { display: none; }    
html { -ms-overflow-style: none; scrollbar-width: none; }    
body {    
margin: 0;    
font-family: Untitled Sans, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;    
background: #05060f linear-gradient(0deg,rgba(216,236,248,.06),rgba(152,192,239,.06));    
font-size: max(calc(var(--_size) * 0.03), 10px);    
--_factor: min(600px, 80vh);    
--_size: min(var(--_factor), 80vw);    
}    
body.gold .header h2 ,    
body.gold p,    
body.gold > * > * :not(.contact-btn) {    
filter: invert(1) brightness(4.7);    
}    
body.gold .header h2 a{    
filter: hue-rotate(0deg);    
}    
body.gold canvas {    
filter: drop-shadow(2em 4em 0px #d8bd10) drop-shadow(-8em -14em 0px #d8bd10);    
}    
body.gold .header .spotlight {    
filter: invert(1) brightness(4.7) opacity(0.5);    
}    
body.gold .mountains > div {    
box-shadow:    
-1em -0.2em 0.4em -1.1em #c2ccff,    
inset 0em 0em 0em 2px #d8a910,    
inset 0.2em 0.3em 0.2em -0.2em #c2ccff,    
inset 10.2em 10.3em 2em -10em #d4e6ff2f;    
}    
body.gold .content-section,    
body.gold .content-section ::before,    
body.gold .content-section ::after{    
filter: invert(1) brightness(4.4) opacity(1);    
}    
h2 {    
font-family: 'Hubot-Sans', sans-serif;    
}    
h2, p {    
margin: 0; padding: 0;    
}    
h2 a {    
text-decoration: none;    
color: unset;    
}    
.header {    
display: flex; width: 100%;    
justify-content: center;    
color: #bad6f7;    
padding: 2em;    
position: absolute;    
top: 0; left: 0; right: 0; margin: 0 auto;    
opacity: 0;    
translate: 0 -1em;    
animation: load 2s ease-in 2s forwards, up 1.4s ease-out 2s forwards;    
}    
.header > :nth-child(1) {    
font-size: 1em;    
position: absolute; left: 0; right: 29em; margin: 0.2em auto;    
width: fit-content;    
}    
.header > :nth-child(2) {    
position: absolute; left: 0; right: 0; margin: 0 auto;    
width: fit-content;    
}    
.header > h2{    
opacity: 0.5;    
cursor: pointer;    
transition: opacity 0.04s ease-in-out;    
}    
.header > h2:hover {    
opacity: 1;    
text-shadow: 0 2px 16px rgba(174,207,242, 0.6);    
width: fit-content;    
}    
.header > div.mid-spot {    
width: 1.8em; height: 1.8em;    
border-radius: 50%;    
background: black;    
box-shadow: 0 0 1em 0 #98c0ef;    
cursor: pointer;    
transition: box-shadow 1s ease-in-out;    
}    
.header > div.mid-spot:hover {    
box-shadow: -0.3em 0.1em 0.2em 0 #d8bd10;    
}    
body.gold .header > div.mid-spot:hover {    
box-shadow: -0.3em 0.1em 0.2em 0 #98c0ef;    
}    
body.gold .header > div.mid-spot {    
box-shadow: 0 0 1em 0 #d8bd10;    
}    
.header > :nth-child(2):hover ~ .spotlight {    
animation: colorize 10s linear infinite;    
}    
@keyframes colorize {    
0%{filter: hue-rotate(0deg); }    
100% {filter: hue-rotate(-380deg);}    
}    
button.contact-btn {    
position: absolute; left: min(46em, 60vw); right: 0; margin: 0 auto;    
width: 8em; height: 2.4em;    
cursor: pointer;    
border-radius: 20em;    
border: none;    
transition: background 0.5s, transform 0.5s;    
border: 1px solid #c2ccff33;    
opacity: 1;    
padding-top: 0.3em;    
background: #121521;    
color: #9dc3f7;    
white-space:nowrap;    
}    
button.contact-btn::before {    
content: ''; display: block; position:absolute; left: 0; top:0; border-radius: 20em;    
width: 100%; height: 100%;    
background: #c2ccff91 radial-gradient(farthest-side at 50% 100%, #c2ccff, transparent);    
opacity: 0.1;    
transition: all 0.4s ease-in-out;    
}    
button.contact-btn:hover::before {    
background: #c2ccff1e radial-gradient(farthest-side at 50% 100%, #c2ccff, transparent);    
opacity: 0.3;    
}    
.contact-btn .glow {    
--border-width: 1px;    
--loop-cycle: 24s;    
position: absolute;    
inset: calc(var(--border-width)* -1);    
border-radius: 50px;    
border: var(--border-width) solid transparent;    
-webkit-mask: linear-gradient(transparent, transparent), linear-gradient(white, white);    
mask: linear-gradient(transparent, transparent), linear-gradient(white, white);    
-webkit-mask-clip: padding-box, border-box;    
mask-clip: padding-box, border-box;    
-webkit-mask-composite: source-in, xor;    
mask-composite: intersect;    
pointer-events: none;    
}    
button.contact-btn:hover .glow {    
--loop-cycle: 2s;    
}    
.contact-btn .glow::after, .contact-btn .glow::before {    
content: "";    
height: 100%;    
offset-anchor: 100% 50%;    
background: radial-gradient(circle at 50% 50%, hsla(0, 0%, 100%, 0.75), transparent 50%), radial-gradient(circle at 50% 50%, #c2ccff 50%, transparent);    
opacity: 0.4;    
offset-path: rect(0 100% 100% 0 round 33px);    
position: absolute;    
display: inline-block;    
-webkit-animation: loop 4s linear infinite;    
animation: loop var(--loop-cycle) linear infinite;    
aspect-ratio: 1 / 1;    
transition: opacity 1s ease-in-out;    
}    
.contact-btn .glow::before {    
animation-delay: calc( var(--loop-cycle) / -2 );    
}    
@keyframes loop {    
100% {    
offset-distance: 100%;    
}    
}    
.contact-btn-content {    
background: linear-gradient(0deg, #d8ecf8, #98c0ef);    
background-clip: text;    
-webkit-text-fill-color: transparent;    
font-size: 1.2em;    
line-height: 142%;    
}    
button.contact-btn:hover .glow::after, button.contact-btn:hover .glow::before {    
opacity: 0.6;    
}    
@keyframes btn-rot {    
0% { rotate: 0deg; }    
100% { rotate: 360deg; }    
}    
.header .spotlight {    
pointer-events: none;    
position: absolute; left: 0; right: 0; top:0; margin: 0 auto;    
transition: filter 1s ease-in-out;    
height: 42em; width: 100%;    
overflow: hidden;    
}    
.header .spotlight > div {    
border-radius: 0 0 50% 50%;    
position: absolute; left: 0; right: 0; margin: 0 auto;    
top: 3em;    
width: 30em; height: max(42em, 86vh);    
background-image: conic-gradient(from 0deg at 50% -5%, transparent 45%, rgba(124, 145, 182, .3) 49%, rgba(124, 145, 182, .5) 50%, rgba(124, 145, 182, .3) 51%, transparent 55%);    
transform-origin: 50% 0;    
filter: blur(15px) opacity(0.5);    
z-index: -1;    
animation: load 2s ease-in-out forwards, loadrot 2s ease-in-out forwards, spotlight 21s ease-in-out infinite reverse;    
}    
.header .spotlight > div:nth-child(1){    
rotate: 20deg;    
animation: load 2s ease-in-out forwards, loadrot 2s ease-in-out forwards, spotlight 17s ease-in-out infinite;    
}    
.header .spotlight > div:nth-child(2){    
rotate: -20deg;    
animation: load 2s ease-in-out forwards, loadrot 2s ease-in-out forwards, spotlight 14s ease-in-out infinite;    
}    
@keyframes loadrot {    
0% { rotate: 0deg; scale: 0;}    
100% { scale: 1;}    
}    
@keyframes spotlight {    
0% {    
transform: rotateZ(0deg) scale(1);    
filter: blur(15px) opacity(0.5);    
}    
20% {    
transform: rotateZ(-1deg) scale(1.2);    
filter: blur(16px) opacity(0.6);    
}    
40% {    
transform: rotateZ(2deg) scale(1.3);    
filter: blur(14px) opacity(0.4);    
}    
60% {    
transform: rotateZ(-2deg) scale(1.2);    
filter: blur(15px) opacity(0.6);    
}    
80% {    
transform: rotateZ(1deg) scale(1.1);    
filter: blur(13px) opacity(0.4);    
}    
100% {    
transform: rotateZ(0deg) scale(1);    
filter: blur(15px) opacity(0.5);    
}    
}    
canvas#particleCanvas {    
position: absolute; pointer-events: none;    
animation: load 0.4s ease-in-out forwards;    
z-index: 1;    
width: 100%;    
}    
p {    
font-size: 1.5em;    
}    
.hero {    
width: 100%;    
height: 100%;    
max-height: 140px;    
position: absolute; top: 16em;    
}    
.heroT {    
position: absolute; left: 0; right: 0; margin: auto;    
height: 20em;    
padding-top: 2em;    
translate: 0 -1.6em;    
opacity: 0;    
animation: load 2s ease-in-out 0.6s forwards;    
}    
@keyframes load {    
0% { opacity: 0;}    
100% { opacity: 1;}    
}    
.heroT > h2 {    
position: absolute;left: 0; right: 0; margin: auto;    
width: fit-content;    
font-size: 7em;    
font-weight: 600;    
color: #9dc3f7;    
background:    
radial-gradient( 2em 2em at 50% 50%,    
transparent calc(var(--p) - 2em),    
#fff calc(var(--p) - 1em),    
#fff calc(var(--p) - 0.4em),    
transparent var(--p)    
),    
linear-gradient(0deg, #bad1f1 30%, #9dc3f7 100%);    
background-clip: text;    
-webkit-background-clip: text;    
-webkit-text-fill-color: transparent;    
text-shadow: 0 2px 16px rgba(174,207,242,.24);    
--p:0%;    
transition:--p 3s linear;    
animation: pulse 10s linear 1.2s infinite;    
}    
.heroT h2:nth-child(2) {    
background:    
radial-gradient( 2em 2em at 50% 50%,    
transparent calc(var(--p) - 2em),    
transparent calc(var(--p) - 1em),    
#fff calc(var(--p) - 1em),    
#fff calc(var(--p) - 0.4em),    
transparent calc(var(--p) - 0.4em),    
transparent var(--p)    
);    
background-clip: text;    
-webkit-background-clip: text;    
-webkit-text-fill-color: transparent;    
filter: blur(16px) opacity(0.4);    
}    
@keyframes pulse {    
0% { --p:0%; }    
50% { --p:300%;}    
100% { --p:300%;}    
}    
@property --p {    
syntax: '<percentage>';    
inherits: false;    
initial-value: 0%;    
}    
.heroP {    
font-size: 1.2em;    
position: absolute; left: 0; right: 0; top: 20.6em; margin: auto;    
height: fit-content; width: fit-content; text-align: center;    
opacity: 0;    
translate: 0 1em;    
animation: load 2s ease-out 2s forwards, up 1.4s ease-out 2s forwards;    
color: #d8ecf8;    
text-shadow: 0 2px 16px rgba(174,207,242,.24);    
background: linear-gradient(0deg, #d8ecf8 0, #98c0ef 100%);    
background-clip: text;    
-webkit-background-clip: text;    
-webkit-text-fill-color: transparent;    
}    
@keyframes up {    
100% { translate: 0; }    
}    
.heroSubP {    
position: absolute; left: 0; right: 0; top: 13em; margin: auto;    
height: fit-content;    
opacity: 0;    
translate: 0 -1em;    
animation: load3 2s ease-in 0s forwards, up 1.4s ease-out 0s forwards;    
}    
@keyframes load3 {    
0% { opacity: 0;}    
100% { opacity: 0.7;}    
}    
.heroSubP p {    
font-size: 1em;    
position: relative; width: fit-content; margin: auto;    
color: #d8ecf8;    
text-shadow: 0 2px 16px rgba(174,207,242,.24);    
background: linear-gradient(0deg, #d8ecf8 0, #98c0ef 100%);    
background-clip: text;    
-webkit-background-clip: text;    
-webkit-text-fill-color: transparent;    
}    
.heroSubP p::before,    
.heroSubP p::after {    
position: absolute; top: 60%;    
display: block; content: '';    
width: 5em; height: 1px;    
opacity: 0;    
animation: load2 1.4s ease-in-out 0s forwards, up 1.4s ease-out 0s forwards;    
}    
@keyframes load2 {    
0% { opacity: 0;}    
100% { opacity: 0.3;}    
}    
.heroSubP p::before{    
background: linear-gradient( -90deg, #9dc3f7 0%, transparent 100%);    
right: 120%;    
translate: -5em 0;    
}    
.heroSubP p::after {    
background: linear-gradient( 90deg, #9dc3f7 0%, transparent 100%);    
left: 120%;    
translate: 5em 0;    
}    
.accent-lines {    
pointer-events: none;    
position: absolute; top: 0; left: 0; right: 0;    
width: 100%; height: 42em;    
z-index: -2;    
--accent-lines-clr: rgba(186, 215, 247, .18);    
}    
.accent-lines > div {    
position: absolute; top: 0; right: 0; left: 0; margin: auto;    
height: 100%; width: 100%;    
}    
.accent-lines > div:nth-child(1) > div{    
position: absolute; top: 0; right: 0; left: 0; margin: auto;    
width: 100%; height: 1px;    
background: linear-gradient(90deg, transparent, var(--accent-lines-clr), transparent);    
opacity: 0; scale: 0;    
animation: accentload 2s ease-out 2.4s forwards;    
}    
.accent-lines > div:nth-child(1) > div:nth-child(1){ top: 6em; }    
.accent-lines > div:nth-child(1) > div:nth-child(2){ top: 11em; }    
.accent-lines > div:nth-child(1) > div:nth-child(3){ top: 16em; }    
.accent-lines > div:nth-child(1) > div:nth-child(4){ top: 24em; }    
.accent-lines > div:nth-child(1) > div:nth-child(5){ top: 29em; }    
.accent-lines > div:nth-child(2) > div{    
position: absolute; top: 0; right: 0; left: 0; margin: auto;    
width: 1px; height: 100%;    
background: var(--accent-lines-clr);    
}    
@keyframes accentload {    
0% {    
opacity: 0; scale: 0;    
}    
100% {    
opacity: 1; scale: 1;    
}    
}    
.accent-lines > div:nth-child(2) > div {    
opacity: 0; scale: 0;    
animation: accentload 2s ease-out 2s forwards;    
}    
.accent-lines > div:nth-child(2) > div:nth-child(1){ left: 24em; }    
.accent-lines > div:nth-child(2) > div:nth-child(2){ left: 34em; }    
.accent-lines > div:nth-child(2) > div:nth-child(3){ right: 24em; }    
.accent-lines > div:nth-child(2) > div:nth-child(4){ right: 34em; }    
.accent-lines > div:nth-child(1) > div::before,    
.accent-lines > div:nth-child(1) > div::after {    
content: ''; display: none; position: absolute;    
width: 0.2em; height: 0.2em; border-radius: 1em;    
background: #9dc3f7;    
left: 0; right: 0; margin: auto;    
translate: 0 -1px;    
opacity: 0; scale: 0;    
animation: accentload 2s ease-out 4.4s forwards;    
}    
.accent-lines > div:nth-child(1) > div:nth-child(3)::before{ display: block; left: 24em; }    
.accent-lines > div:nth-child(1) > div:nth-child(3)::after{ display: block; right: 24em; }    
.accent-lines > div:nth-child(1) > div:nth-child(4)::before{ display: block; left: 24em; }    
.accent-lines > div:nth-child(1) > div:nth-child(4)::after{ display: block; right: 24em; }    
.accent-lines > div:nth-child(1) > div:nth-child(5)::before{ display: block; left: 24em; }    
.accent-lines > div:nth-child(1) > div:nth-child(5)::after{ display: block; right: 24em; }    
.accent-lines > div:nth-child(1) > div:nth-child(2)::before,    
.accent-lines > div:nth-child(1) > div:nth-child(2)::after{    
display: block; width: 5em; height: 1px; border-radius: 0; opacity: 0.12;    
}    
.accent-lines > div:nth-child(1) > div:nth-child(2)::before{    
right: 24em; rotate: 45deg; translate: -2.5em 2.5em;    
}    
.accent-lines > div:nth-child(1) > div:nth-child(2)::after{    
right: 24em; rotate: -45deg; translate: -2.5em 2.5em;    
}    
.accent-lines > div:nth-child(1) > div:nth-child(1)::before,    
.accent-lines > div:nth-child(1) > div:nth-child(1)::after{    
display: block; width: 5em; height: 1px; border-radius: 0; opacity: 0.12;    
}    
.accent-lines > div:nth-child(1) > div:nth-child(1)::before{    
left: 24em; rotate: 45deg; translate: 2.5em 7.5em;    
}    
.accent-lines > div:nth-child(1) > div:nth-child(1)::after{    
left: 24em; rotate: -45deg; translate: 2.5em 7.5em;    
}    
.accent-lines > div:nth-child(1) > div:nth-child(2)::before,    
.accent-lines > div:nth-child(1) > div:nth-child(2)::after {    
opacity: 0; scale: 0;    
animation: accentload2 2s ease-out 2.4s forwards;    
}    
.accent-lines > div:nth-child(1) > div:nth-child(1)::before,    
.accent-lines > div:nth-child(1) > div:nth-child(1)::after {    
opacity: 0; scale: 0;    
animation: accentload3 2s ease-out 2.4s forwards;    
}    
@keyframes accentload2 {    
0% {    
opacity: 0; scale: 0; transform: rotate(360deg);    
}    
50% { scale: 0; }    
100% {    
opacity: 0.12; scale: 1; transform: rotate(0deg);    
}    
}    
@keyframes accentload3 {    
0% {    
opacity: 0; scale: 0; transform: rotate(-360deg);    
}    
50% { scale: 0; }    
100% {    
opacity: 0.12; scale: 1; transform: rotate(0deg);    
}    
}    
.mountains {    
position: absolute; left: 0; right: 0; top: 31em; margin: auto;    
width: 100%; height: 10em;    
pointer-events: none;    
}    
.mountains::before {    
content: ''; display: block;    
width: 100%; height: 500%;    
position: absolute; top: 0%;    
background: linear-gradient(90deg, #121521 0%, transparent 50%);    
background: linear-gradient(0deg, #121521 80%, transparent 90%);    
z-index: 2;    
}    
.mountains > div {    
box-shadow:    
-1em -0.2em 0.4em -1.1em #c2ccff,    
inset 0em 0em 0em 2px #c2ccff,    
inset 0.2em 0.3em 0.2em -0.2em #c2ccff,    
inset 10.2em 10.3em 2em -10em #d4e6ff2f;    
background: #121521;    
z-index: 1;    
filter: brightness(0.8);    
position: absolute; left: 0; right: 0; margin: auto;    
width: 20em; height: 20em;    
rotate: 45deg;    
}    
.mountains > div:nth-child(1) {    
bottom: -240%;    
translate: -6em 2em;    
animation: mountainload1 2s ease-out 2.4s forwards;    
}    
.mountains > div:nth-child(2) {    
bottom: -240%;    
translate: -2em 0em;    
width: 14em; height: 20em;    
animation: mountainload2 2s ease-out 2.2s forwards;    
}    
.mountains > div:nth-child(3) {    
bottom: -240%;    
translate: 6em 3em;    
animation: mountainload1 2s ease-out 2s forwards;    
}    
@keyframes mountainload1 {    
0% { bottom: -240%; }    
100% { bottom: -140%; }    
}    
@keyframes mountainload2 {    
0% { bottom: -240%; }    
100% { bottom: -108%; }    
}    
.mountains > div::before {    
content: ''; display: block;    
background: repeating-radial-gradient( at 100% 100%, transparent 0%, #c2ccff22 2px, transparent 4px);    
width: 12em; height: 12em;    
position: absolute;    
left: 0; top: 0;    
border-bottom-right-radius: 100%;    
}    
.hero-spacer {    
height: 40em;    
pointer-events: none;    
}    
.content-section {    
position: relative;    
z-index: 1112;    
color: #fff;    
width: 100%;    
text-align: center;    
padding: 16em 0 12em 0;    
overflow: hidden;    
}    
.content-section p.subt {    
color: #d8ecf8be;    
font-size: 0.8em;    
font-weight: 200;    
position: relative;    
width: fit-content;    
margin: auto;    
}    
.content-section h3 {    
margin: 0.4em 0 0.6em 0;    
font-size: 2.3em;    
font-weight: 600;    
color: #d8ecf8;    
text-shadow: 0 2px 16px rgba(174,207,242,.24);    
background: linear-gradient(0deg, #d8ecf8 0, #98c0ef 100%);    
background-clip: text;    
-webkit-background-clip: text;    
-webkit-text-fill-color: transparent;    
}    
.content-section p.subp {    
color: #d8ecf8be;    
font-size: 1em;    
font-weight: 400;    
max-width: 26em;    
margin: auto;    
}    
.content-section p.subt::before,    
.content-section p.subt::after {    
position: absolute; top: 60%;    
display: block; content: '';    
width: 5em; height: 1px;    
opacity: 0.5;    
}    
.content-section p.subt::before{    
background: linear-gradient( -90deg, #9dc3f7 0%, transparent 100%);    
right: 120%;    
top: 50%;    
}    
.content-section p.subt::after {    
background: linear-gradient( 90deg, #9dc3f7 0%, transparent 100%);    
left: 120%;    
top: 50%;    
}    
.content-section .content-acc {    
position: absolute;    
left: 0; right: 0; top: 25%; margin: auto;    
display: flex; justify-content: center;    
}    
.content-section .content-acc div{    
width: 10em; height: 10em;    
border-radius: 50%;    
box-shadow:    
-1em -0.2em 0.4em -1.1em #c2ccff,    
inset 0em 0em 0em 2px #c2ccff,    
inset 0.2em 0.3em 0.2em -0.2em #c2ccff,    
inset -1.2em 2.3em 2em -0.5em #d4e6ff2f;    
background: #121521;    
z-index: 1;    
filter: brightness(0.8);    
background: repeating-radial-gradient( at 50% 50%, transparent 0%, #c2ccff22 2px, transparent 4px);    
translate: -18em;    
}    
.content-section .content-acc div:nth-child(2){    
translate: 18em 12em;    
border-radius: 2em;    
box-shadow:    
-1em -0.2em 0.4em -1.1em #c2ccff,    
inset 0em 0em 0em 2px #c2ccff,    
inset 0.2em 0.3em 0.2em -0.2em #c2ccff,    
inset 10.8em 11.3em 2em -10.5em #d4e6ff2f;    
}    
</style>    
</head>    
<body>    
<div class="header">    
<h2><a href="###">RAFA</a></h2>    
<div class="mid-spot" onclick="document.body.classList.toggle('gold');"></div>    
<button class="contact-btn">    
<span class="glow"></span>    
<span class="contact-btn-content">Contact Us</span>    
</button>    
<div class="spotlight">    
<div></div>    
<div></div>    
<div></div>    
</div>    
</div>    
<canvas id="particleCanvas"></canvas>    
<div class="accent-lines">    
<div>    
<div></div>    
<div></div>    
<div></div>    
<div></div>    
<div></div>    
</div>    
<div>    
<div></div>    
<div></div>    
<div></div>    
<div></div>    
</div>    
</div>    
<div class="heroSubP">    
<p>Introducing</p>    
</div>    
<div class="hero">    
<div class="heroT">    
<h2>Eclipx</h2>    
<h2>Eclipx</h2>    
</div>    
</div>    
<p class="heroP">The world's best platform, <br>    
powered by EclipxOS + React.</p>    
<div class="mountains">    
<div></div>    
<div></div>    
<div></div>    
</div>    
<div class="hero-spacer"></div>    
<div class="content-section">    
<div class="content-acc">    
<div></div>    
<div></div>    
</div>    
<p class="subt">Revolutionary by design</p>    
<h3 class="title">Harness. Empower.<br>    
Unmatched Versatility.</h3>    
<p class="subp">At the core lies our revolutionary framework, <br>ensuring adaptability across all application    
architectures.</p>    
</div>    
<script>    
const canvas = document.getElementById('particleCanvas');    
const ctx = canvas.getContext('2d');    
canvas.width = window.innerWidth;    
canvas.height = window.innerHeight;    
let particleCount = Math.floor((canvas.width * canvas.height) / 6000);    
class Particle {    
constructor() {    
this.reset();    
this.fadeDelay = Math.random() * 600 + 100;    
this.fadeStart = Date.now() + this.fadeDelay;    
}    
reset() {    
this.x = Math.random() * canvas.width;    
this.y = Math.random() * canvas.height;    
this.speed = Math.random() / 5 + 0.1;    
this.opacity = 1;    
this.fadingOut = false;    
}    
update() {    
this.y -= this.speed;    
if (this.y < 0) this.reset();    
if (!this.fadingOut && Date.now() > this.fadeStart) this.fadingOut = true;    
if (this.fadingOut) {    
this.opacity -= 0.008;    
if (this.opacity <= 0) this.reset();    
}    
}    
draw() {    
ctx.fillStyle = `rgba(${255 - Math.random() * 128}, 255, 255, ${this.opacity})`;    
ctx.fillRect(this.x, this.y, 0.4, Math.random() * 2 + 1);    
}    
}    
let particles = Array.from({ length: particleCount }, () => new Particle());    
function animate() {    
ctx.clearRect(0, 0, canvas.width, canvas.height);    
particles.forEach(p => { p.update(); p.draw(); });    
requestAnimationFrame(animate);    
}    
function onResize() {    
canvas.width = window.innerWidth;    
canvas.height = window.innerHeight;    
particleCount = Math.floor((canvas.width * canvas.height) / 6000);    
particles = Array.from({ length: particleCount }, () => new Particle());    
}    
window.addEventListener('resize', onResize);    
animate();    
</script>    
</body>    
</html>


版权声明：本文由 LzxBlog 发布，如需转载请注明出处。

本文链接：https://www.liuzhixi.cn/html/315.html

标签: HTMLCSSHTML静态模板Css动画
返回列表

上一篇：iPhone用快捷指令在numbers表格中记账

没有最新的文章了...

相关文章

科技感的产品功能介绍tab切换特效

科技感的产品功能介绍tab切换特效

jQuery黑色大气科技风格的产品功能分类选项卡布局，点击分类标签tab选项卡切换特效。适用于：互联网、软件、云主机功能介绍ui布局。下载链接: https:/...

ets中国地图及省份地图位置信息标注

ets中国地图及省份地图位置信息标注

插件描述：基于ets中国地图，便于业务标注信息点，自定义添加信息框更新时间：2021-09-02 02:06:38注：由于地图json文件，是异步获取的，所以查...

响应式圣诞节网站设计 - HTML CSS 和 JavaScript

响应式圣诞节网站设计 - HTML CSS 和 JavaScript

主要特点✅ 响应式标题部分，带有使用 vanilla javascript 的搜索图标和菜单切换器✅ 使用 vanilla javascript 的带有滑块的响...

用 HTML - CSS - JavaScript - BOOTSTRAP - PHP - MySQL 完成响应式牙医网站设计

用 HTML - CSS - JavaScript - BOOTSTRAP - PHP - MySQL 完成响应式牙医网站设计

用 html css javascript boostrap php mysql 创建一个完整的响应式单页牙科预约网站设计模板主题。主要特点✅ 响应式标题，带有...

GitHub Copilot插件 - AI程序员

GitHub Copilot插件 - AI程序员

【爆炸神器copilot】写点注释，代码自动生成申请使用Copilot插件的步骤：第一步：vscode 登录GitHub账号：第二步：访问 copilot gi...

[原创]自己做了个百度首页美化插件，纯属练手

[原创]自己做了个百度首页美化插件，纯属练手

闲着没事，自己做了一个美化百度首页的油猴插件，就是一个练手的小项目，油猴实在是很好玩，好有很多接口没弄明白，日后慢慢探索吧插件截图对比去除顶部的菜单栏的背景阴影...

发表评论

访客

看不清，换一张

◎欢迎参与讨论，请在这里发表您的看法和观点。

ICP
提供技术支持 赞助云储存