跳转到效果内容
TOMOYO
效果库
怎么用
See it. Try it. Make it.
EN
/
中文
分类 · 效果目录
全部效果
7
动画与交互
4
悬停浮起
柔和入场
套色印刷
海岸显影
材质与光影
1
磨砂玻璃
视觉风格
1
杂志编辑风格
布局与编排
1
便当盒布局
返回浏览结果
材质与光影
磨砂玻璃
磨砂玻璃
Frosted glass
透出背景层次,文字依然清楚。
效果预览
提示词
分享效果
复制提示词
STAY
CURIOUS.
A little room
for what comes next.
悬停、聚焦或轻点卡片试试
调整效果
重置
从一个预设开始
磨砂
透亮
暖色
磨砂
透亮
暖色
调整后的参数会一起写进提示词。
表面质感
色调
纸色
冷色
暖色
纸色
冷色
暖色
模糊程度
px
表面不透明度
背景饱和度
边缘不透明度
圆角大小
px
阴影浓度
提示词语言
English
简体中文
背景模糊 18px、饱和度 1.15;前景内容保持清晰。
复制提示词
查看完整提示词
把这个效果用在你的项目里
提示词已包含当前参数,并要求 AI 沿用你项目里的内容和设计。
提示词 · 简体中文
沿用我项目现有的技术栈,实现「磨砂玻璃」效果。 保留我的内容、字体、颜色与布局。把效果应用于现有卡片,不复刻 Tomoyo 的示例插画,也不引入组件库。 添加磨砂玻璃:背景 rgba(247, 232, 216, 0.86),backdrop-filter: blur(18px) saturate(1.15),圆角 8px;1px rgba(255, 249, 239, 0.7) 内描边,阴影 0 20px 32px rgba(4, 25, 72, 0.32)。后方放有对比度的图片,让模糊可见;前景内容保持清晰。低不透明度下为文字加局部纸色底以保证可读性。描边不占布局空间,不支持 backdrop-filter 时回退到不透明 #f7e8d8。重播先用 160ms 回到纸面,再用 320ms 和 cubic-bezier(0.16, 1, 0.3, 1) 过渡到玻璃。 保持点击区域不动,只移动内部视觉表面,避免悬停边界反复触发。从当前画面平滑接续动画,快速切换时取消旧动画并保留当前视觉状态。动画播放中重复点击重播不应让画面跳回起点。 尊重 prefers-reduced-motion:跳过位移和渐变,立即显示内容,保留清晰的焦点标记。玻璃可保留静态材质。支持键盘和触屏,动画仅影响当前组件。 实现后说明哪些参数可以调整,以及如何验证行为。
全选文字
复制提示词
提示词 · 中文
复制提示词