只要你能用html、css和js就能实现,而不需要使用在gpu上渲染的库!
注意:这些片段只在Chrome上运行,已经在Safari、Firefox和Edge上进行了测试,它们都没有显示失真效果 *
- https://snipzy.dev/snippets/liquid-glass-card.html-液体玻璃卡CRD004
- https://snipzy.dev/snippets/liquid-glass-button.html-液体玻璃按钮BTN003
- https://snipzy.dev/snippets/liquid-glass-dropdown.html-液体玻璃下拉菜单DRP001
- https://snipzy.dev/snippets/liquid-glass-form.html-液态玻璃形式FRM001
- https://snipzy.dev/snippets/liquid-glass-icons.html-液体玻璃图标ICO001
- https://snipzy.dev/snippets/liquid-glass-nav.html-液体玻璃导航NAV002
- https://snipzy.dev/snippets/liquid-glass-search.html-液体玻璃搜索SRH002
- https://snipzy.dev/snippets/liquid-glass-sidebar.html-液体玻璃边栏SBR001
- https://snipzy.dev/snippets/liquid-glass-spinner.html-液体玻璃旋转器LDR003
- https://snipzy.dev/snippets/liquid-glass-toggle.html-液体玻璃开关TGL001
网友热评:
看起来都不像液体玻璃。看起来你只是模糊了背景/底层元素,而苹果液体玻璃做得更多。苹果会与周围的元素相互作用,而且光线在玻璃内折射,这是一个惊人的编码成就。你这样做很酷(做得很好),但这就像建造一个乐高A380模型,然后说你做了一个功能齐全的空中客车A380。
如果它不跨浏览器兼容,它的价值就没有它看起来那么高。