diff --git a/css/index.css b/css/index.css index f860ca0..91de69a 100644 --- a/css/index.css +++ b/css/index.css @@ -509,6 +509,10 @@ padding: 24px 28px; position: relative; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + display: flex; + flex-direction: row; + align-items: center; + gap: 16px; /* 毛玻璃效果 */ background: rgba(15, 23, 42, 0.6); @@ -528,6 +532,28 @@ overflow: hidden; } +/* banner-item 图标样式 */ +.banner-s .banner-list .banner-item .banner-item-icon { + width: 48px; + height: 48px; + flex-shrink: 0; + object-fit: contain; + transition: all 0.4s ease; + filter: brightness(1.1); +} + +.banner-s .banner-list .banner-item:hover .banner-item-icon { + transform: scale(1.1) rotate(5deg); + filter: brightness(1.3) drop-shadow(0 0 12px rgba(56, 189, 248, 0.6)); +} + +/* banner-item 文字内容区域 */ +.banner-s .banner-list .banner-item-content { + flex: 1; + display: flex; + flex-direction: column; +} + /* 卡片光晕装饰 */ .banner-s .banner-list .banner-item::before { content: ''; diff --git a/index.html b/index.html index 77aab6d..c687cb8 100644 --- a/index.html +++ b/index.html @@ -101,20 +101,32 @@