|
|
@@ -250,7 +250,7 @@ const cards = [
|
|
|
}
|
|
|
|
|
|
.cdn-container {
|
|
|
- margin-top: 20px;
|
|
|
+ margin-top: 10px;
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
@@ -446,27 +446,20 @@ const cards = [
|
|
|
background-size: 100px 100px;
|
|
|
animation: gridMove 4s linear infinite;
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
- .grid-floor {
|
|
|
- width: 200%;
|
|
|
- height: 400px;
|
|
|
- position: relative;
|
|
|
- transform: rotateX(60deg);
|
|
|
- transform-origin: center top;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
|
|
|
- .grid-lines {
|
|
|
+ // 底部渐变遮罩,平滑过渡到下一个模块
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
width: 100%;
|
|
|
- height: 200%;
|
|
|
- background-image:
|
|
|
- linear-gradient(rgba(124, 77, 255, 0.3) 2px, transparent 2px),
|
|
|
- linear-gradient(90deg, rgba(124, 77, 255, 0.3) 2px, transparent 2px);
|
|
|
- background-size: 50px 50px;
|
|
|
- animation: gridMove 4s linear infinite;
|
|
|
+ height: 100px;
|
|
|
+ background: linear-gradient(to bottom, transparent 0%, #030014 100%);
|
|
|
+ pointer-events: none;
|
|
|
+ z-index: 1;
|
|
|
}
|
|
|
-
|
|
|
+}
|
|
|
|
|
|
@keyframes gridMove {
|
|
|
0% {
|