Spaces:
Running
Running
Update index.html
Browse files- index.html +22 -1
index.html
CHANGED
|
@@ -110,6 +110,27 @@
|
|
| 110 |
margin: 20px 0; /* 上下留白 */
|
| 111 |
display: block; /* 避免和文字挤在一起 */
|
| 112 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 113 |
</style>
|
| 114 |
</head>
|
| 115 |
<body>
|
|
@@ -117,7 +138,7 @@
|
|
| 117 |
<div class="hero">
|
| 118 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
| 119 |
|
| 120 |
-
<div style="font-size: 80px; color: var(--primary); margin-bottom: 24px;">
|
| 121 |
<i class="fas fa-project-diagram"></i>
|
| 122 |
</div>
|
| 123 |
|
|
|
|
| 110 |
margin: 20px 0; /* 上下留白 */
|
| 111 |
display: block; /* 避免和文字挤在一起 */
|
| 112 |
}
|
| 113 |
+
/* 👇 定义呼吸动画 */
|
| 114 |
+
@keyframes breathe {
|
| 115 |
+
0% {
|
| 116 |
+
transform: scale(1);
|
| 117 |
+
filter: drop-shadow(0 0 0 rgba(5, 150, 105, 0)); /* 无光晕 */
|
| 118 |
+
}
|
| 119 |
+
50% {
|
| 120 |
+
transform: scale(1.08); /* 微微放大 8% */
|
| 121 |
+
filter: drop-shadow(0 0 25px rgba(5, 150, 105, 0.6)); /* 产生同色系的光晕 */
|
| 122 |
+
}
|
| 123 |
+
100% {
|
| 124 |
+
transform: scale(1);
|
| 125 |
+
filter: drop-shadow(0 0 0 rgba(5, 150, 105, 0)); /* 恢复无光晕 */
|
| 126 |
+
}
|
| 127 |
+
}
|
| 128 |
+
|
| 129 |
+
/* 给 Logo 容器加上动画属性 */
|
| 130 |
+
.breathing-logo {
|
| 131 |
+
display: inline-block; /* 必须是 block 或 inline-block 才能形变 */
|
| 132 |
+
animation: breathe 3.5s ease-in-out infinite; /* 3.5秒一个循环，平滑进出，无限循环 */
|
| 133 |
+
}
|
| 134 |
</style>
|
| 135 |
</head>
|
| 136 |
<body>
|
|
|
|
| 138 |
<div class="hero">
|
| 139 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
| 140 |
|
| 141 |
+
<div class="breathing-logo" style="font-size: 80px; color: var(--primary); margin-bottom: 24px;">
|
| 142 |
<i class="fas fa-project-diagram"></i>
|
| 143 |
</div>
|
| 144 |
|