关于vue.js: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 画笔。

灵感来自 Fluent Design's Acrylic Material

⭐️谢谢

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