Spaces:
Running
Running
Update index.html
Browse files- index.html +33 -34
index.html
CHANGED
@@ -538,45 +538,44 @@ html, body {
|
|
538 |
100% { opacity: 0.8; }
|
539 |
}
|
540 |
.wave-container {
|
541 |
-
position: fixed;
|
542 |
top: 0;
|
543 |
left: 0;
|
544 |
-
width: 100vw;
|
545 |
-
height: 100vh;
|
546 |
-
z-index: -1;
|
547 |
-
overflow: hidden;
|
548 |
}
|
549 |
/* グリッド線を最背面に */
|
550 |
-
|
551 |
-
|
552 |
-
|
553 |
-
|
554 |
-
|
555 |
-
|
556 |
-
|
557 |
-
|
558 |
-
|
559 |
-
|
560 |
-
|
561 |
-
|
562 |
|
563 |
-
|
564 |
-
|
565 |
-
|
566 |
-
|
567 |
-
|
568 |
-
|
569 |
-
|
570 |
-
|
571 |
-
|
572 |
-
|
573 |
-
|
574 |
-
|
575 |
-
|
576 |
-
|
577 |
-
|
578 |
-
|
579 |
-
}
|
580 |
.wave:nth-child(2) {
|
581 |
animation-delay: 1s;
|
582 |
opacity: 0.5;
|
|
|
538 |
100% { opacity: 0.8; }
|
539 |
}
|
540 |
.wave-container {
|
541 |
+
position: fixed;
|
542 |
top: 0;
|
543 |
left: 0;
|
544 |
+
width: 100vw;
|
545 |
+
height: 100vh;
|
546 |
+
z-index: -1;
|
547 |
+
overflow: hidden;
|
548 |
}
|
549 |
/* グリッド線を最背面に */
|
550 |
+
.grid-lines {
|
551 |
+
position: absolute;
|
552 |
+
top: 0;
|
553 |
+
left: 0;
|
554 |
+
width: 100%;
|
555 |
+
height: 100%;
|
556 |
+
background-image:
|
557 |
+
linear-gradient(rgba(100, 200, 255, 0.1) 1px, transparent 1px),
|
558 |
+
linear-gradient(90deg, rgba(100, 200, 255, 0.1) 1px, transparent 1px);
|
559 |
+
background-size: 50px 50px;
|
560 |
+
z-index: 1;
|
561 |
+
}
|
562 |
|
563 |
+
.wave {
|
564 |
+
position: absolute;
|
565 |
+
width: 100%;
|
566 |
+
height: 100%;
|
567 |
+
background: linear-gradient(
|
568 |
+
to bottom,
|
569 |
+
transparent,
|
570 |
+
rgba(100, 200, 255, 0.1) 20%,
|
571 |
+
rgba(100, 200, 255, 0.3) 50%,
|
572 |
+
rgba(100, 200, 255, 0.1) 80%,
|
573 |
+
transparent
|
574 |
+
);
|
575 |
+
opacity: 0.7;
|
576 |
+
animation: waveFlow 4s linear infinite;
|
577 |
+
z-index: 2;
|
578 |
+
}
|
|
|
579 |
.wave:nth-child(2) {
|
580 |
animation-delay: 1s;
|
581 |
opacity: 0.5;
|