vue3 实现 亚克力材质

如何设计 Acrylic

我们微调 Acrylic 的关键组件以凸显其独特外观和属性。 我们从半透明度、模糊和噪点设置开始，为平滑图面增添视觉深度和维度。 我们添加了排除混合模式层，以确保放置在 Acrylic 背景上的 UI 的对比度和可读性。 最后，我们添加了各种颜色色调，以供用户进行个性化设置。 这些图层协同作用，形成了全新的实用材料。

🌈 Demo

• https://huodoushigemi.github....

🚀 需要环境

• Chorme 76+
• Vue 3+

⚙️ 安装

npm i -S vue-acrylic

🦄 在 JS 中使用

<h1 id="acrylic1">ACRYLIC</h1>
<h1 id="acrylic2">ACRYLIC</h1>

<script>
  import { useAcrylic } from 'vue-acrylic'

  const options1 = {
    bulr: 20,
    noiseOpacity: 1,
    noiseSize: 50
  }

  useAcrylic(document.getElementById('acrylic1'))
  useAcrylic(document.getElementById('acrylic2'), options1)
</script>

🦄 在 Vue 中使用

import { createApp } from 'vue'
import Acrylic from 'vue-acrylic'
import App from './App.vue'

createApp(App).use(Acrylic).mount('#app')

<script setup>
  const opt = {
    bulr: 20,
    noiseOpacity: 1,
    noiseSize: 50
  }
</script>

<template>
  <div v-acrylic>Acrylic</div>
  <div v-acrylic="opt">Acrylic</div>
</template>

📄 选项

你可以选择在应用的 Acrylic 中添加颜色色调，以展示个性化设计或实现与页面其他元素之间的视觉平衡。 若要显示颜色而非灰度，你需要使用以下属性定义属于你自己的 Acrylic 画笔。

name	type	default	Description
blur	number	30	模糊大小
color	string	#e6e6e6	颜色/色调覆盖层
opacity	number	0.5	色调层不透明度
brightness	number	1	控制可从背景穿过 Acrylic 图面的亮度
saturate	number	1.6	控制可从背景穿过 Acrylic 图面的饱和度
noiseOpacity	number	0.75	噪点不透明度
noiseSize	number	30	噪点大小
disabled	boolean	false	是否禁用 Acrylic
fallbackColor	string	#e6e6e6e6	在禁用状态中替换 Acrylic 的纯色

🌈 灵感来自 Fluent Design's Acrylic Material

⭐️谢谢

如果这篇文章对你有帮助请给我 ⭐️