多卡片效果悬停效果

效果展示

页面结构

从页面的结构上看，在默认状态下毛玻璃卡片是有层次感的效果叠加在一起，并且鼠标悬停在卡片区域后，卡片整齐排列。

CSS3 知识点

• transform 属性的 rotate 值运用
• content 属性的 attr 值运用

实现页面整体布局

<div class="container"><div class="glass" style="--i: -15" data-text="Design"><i class="fa-solid fa-pen"></i></div><div class="glass" style="--i: 5" data-text="Code"><i class="fa-solid fa-code"></i></div><div class="glass" style="--i: 25" data-text="Launch"><i class="fa-solid fa-rocket"></i></div><div class="glass" style="--i: -15" data-text="Earn"><i class="fa-solid fa-money-check-dollar"></i></div>
</div>

实现卡片的样式

.container .glass {position: relative;width: 200px;height: 240px;background: linear-gradient(#fff2, transparent);border: 1px solid rgba(0, 0, 0, 0.25);backdrop-filter: blur(10px);display: flex;justify-content: center;align-items: center;transition: 0.5s;border-radius: 10px;margin: 0 -45px;/* 获取HTML中的样式变量值 */transform: rotate(calc(var(--i) * 1deg));
}.container:hover .glass {transform: rotate(0deg);margin: 0 20px;
}

实现卡片悬停样式

.container .glass::before {/* 获取HTML页面中的文字变量值 */content: attr(data-text);position: absolute;bottom: 0;width: 100%;height: 40px;background: rgba(255, 255, 255, 0.05);display: flex;justify-content: center;align-items: center;color: #fff;
}.container .glass i {font-size: 5em;color: #fff;
}

完整代码下载

完整代码下载