vue实现液态玻璃

Vue 实现液态玻璃效果

液态玻璃效果是一种模拟液体流动和玻璃质感的视觉特效，通常结合 CSS 动画和 Vue 的动态数据绑定实现。以下是具体实现方法：

安装依赖 确保项目已安装 vue 和 gsap（用于高级动画效果），通过以下命令安装：

npm install gsap

创建 Vue 组件 新建一个 Vue 组件（如 LiquidGlass.vue），包含模板、样式和逻辑：

<template>
  <div class="liquid-glass-container">
    <div class="liquid" ref="liquid"></div>
  </div>
</template>

<script>
import { gsap } from "gsap";

export default {
  mounted() {
    this.animateLiquid();
  },
  methods: {
    animateLiquid() {
      const liquid = this.$refs.liquid;
      gsap.to(liquid, {
        duration: 3,
        scaleX: 1.2,
        scaleY: 0.8,
        borderRadius: "50%",
        repeat: -1,
        yoyo: true,
        ease: "sine.inOut"
      });
    }
  }
};
</script>

<style scoped>
.liquid-glass-container {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
}

.liquid {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(100, 200, 255, 0.6), rgba(255, 255, 255, 0.8));
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5),
              0 0 30px rgba(100, 200, 255, 0.3);
  filter: blur(5px);
}
</style>

关键点解析

• GSAP 动画：通过 gsap.to 动态改变元素的形状和大小，yoyo: true 实现来回动画效果。
• CSS 样式：使用 border-radius 的不规则值和 gradient 背景模拟液态表面，box-shadow 增强玻璃质感。
• 模糊效果：filter: blur 软化边缘，使过渡更自然。

高级优化

• 结合 Vue 的 v-if 或 v-show 控制动画触发条件。
• 使用 window.requestAnimationFrame 实现更流畅的逐帧动画。
• 通过 mix-blend-mode: screen 调整混合模式，增强与其他元素的视觉融合。

示例效果扩展 在父组件中引入并交互：

<template>
  <button @click="toggleEffect">切换效果</button>
  <LiquidGlass v-if="showEffect" />
</template>

<script>
import LiquidGlass from "./LiquidGlass.vue";

export default {
  components: { LiquidGlass },
  data() {
    return { showEffect: false };
  },
  methods: {
    toggleEffect() {
      this.showEffect = !this.showEffect;
    }
  }
};
</script>