返回 Web 开发
CSS

feature-liquidglass

纯 HTML/CSS 实现的 Liquid Glass 基础效果，适合学习原理。

Ander Marlon
2025-12-08

实时演示

Feature Liquid Glass

Beautiful liquid glass effect with CSS

Glass Card

精美的玻璃态卡片效果，支持悬停动画

Glass Buttons

Large Panel

大面板效果，适合展示主要内容或仪表盘

Icon Buttons

Glass Input

Glass Tags

Liquid GlassGlassmorphismUI Design

代码示例

<!-- Liquid Glass CSS -->
<div class="glass-effect">
  <h2>Feature Liquid Glass</h2>
  <p>Beautiful liquid glass effect with CSS</p>
</div>

<style>
.glass-effect {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}
</style>

资源信息

分类
Web 开发
子分类
CSS
作者
Ander Marlon
添加日期
2025-12-08

标签

HTMLCSS基础