57 lines
1.5 KiB
Vue
57 lines
1.5 KiB
Vue
<template>
|
|
<div class="holo-layer" :class="[config.type, { 'shift': config.colorShift }]" :style="holoStyle"></div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps<{ config: any }>();
|
|
|
|
const holoStyle = computed(() => ({
|
|
'--o': props.config.opacity,
|
|
'--bm': props.config.blendMode,
|
|
// 使用 hover-tilt 自动注入的变量
|
|
'--p-x': 'var(--tilt-x)',
|
|
'--p-y': 'var(--tilt-y)',
|
|
}));
|
|
</script>
|
|
|
|
<style scoped>
|
|
.holo-layer {
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: var(--o);
|
|
mix-blend-mode: var(--bm);
|
|
pointer-events: none;
|
|
transition: opacity 0.3s ease;
|
|
background-size: 200% 200%;
|
|
background-position: var(--p-x) var(--p-y);
|
|
}
|
|
|
|
/* 1. 银河碎钻：使用噪点和点状渐变 */
|
|
.galaxy {
|
|
background-image:
|
|
radial-gradient(circle at var(--p-x) var(--p-y), white 1%, transparent 2%),
|
|
url('https://res.cloudinary.com/simey/image/upload/v1631535194/pokemon-cards/glitter.png');
|
|
filter: brightness(1.2) contrast(1.5);
|
|
}
|
|
|
|
/* 2. 黄金限定：使用深黄色到亮金色的线性渐变 */
|
|
.GOLD .holo-layer {
|
|
background-image: linear-gradient(110deg,
|
|
transparent 40%, rgba(255,215,0,0.8) 45%, #fff 50%, rgba(255,215,0,0.8) 55%, transparent 60%
|
|
);
|
|
}
|
|
|
|
/* 3. 彩虹稀有：经典的光谱渐变 */
|
|
.rainbow {
|
|
background-image: linear-gradient(115deg,
|
|
#ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff
|
|
);
|
|
}
|
|
|
|
/* 色相旋转动画：让卡片动起来 */
|
|
.shift {
|
|
filter: hue-rotate(calc(var(--tilt-x) * 3.6deg));
|
|
}
|
|
</style> |