苹果玻璃卡片效果
.glass{
position: fixed;
z-index: 1;
top: 40px;
left: 50%;
translate: -50%;
display: flex;
align-items: center;
width: 200px;
height: 100px;
box-sizing: border-box;
padding: 8px 12px 10px;
margin: 0 auto;
border: none;
border-radius: 20px;
background-color: color-mix(in srgb, var(--c-glass) 12%, transparent);
backdrop-filter: blur(5px) saturate(var(--saturation));
box-shadow: inset 0 0 0 1px color-mix(in srgb,
var(--c-light) calc(var(--glass-reflex-light) * 10%),
transparent),
inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
inset -0.3px -1px 4px 0px color-mix(in srgb,
var(--c-dark) calc(var(--glass-reflex-dark) * 12%),
transparent),
inset -1.5px 2.5px 0px -2px color-mix(in srgb,
var(--c-dark) calc(var(--glass-reflex-dark) * 20%),
transparent),
inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
inset 2px -6.5px 1px -4px color-mix(in srgb,
var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
transparent),
0px 1px 5px 0px color-mix(in srgb,
var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
transparent),
0px 6px 16px 0px color-mix(in srgb,
var(--c-dark) calc(var(--glass-reflex-dark) * 8%),
transparent);
transition: background-color 400ms cubic-bezier(1, 0, 0.4, 1),
box-shadow 400ms cubic-bezier(1, 0, 0.4, 1);
}
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果