zzy-background-animation 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +110 -0
- package/dist/ZBackground.d.ts +104 -0
- package/dist/index.d.ts +21 -0
- package/dist/style.d.ts +2 -0
- package/dist/zzy-background-animation.es.js +446 -0
- package/dist/zzy-background-animation.umd.js +246 -0
- package/package.json +47 -0
package/README.md
ADDED
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
# zzy-background-animation
|
|
2
|
+
|
|
3
|
+
Vue3 背景动画组件，支持粒子效果、视差滚动、脉冲光晕、扫描线、网格动画、光波扩散、故障艺术等多种特效。
|
|
4
|
+
|
|
5
|
+
## 安装
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install zzy-background-animation
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## 使用
|
|
12
|
+
|
|
13
|
+
### 全局注册
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
import { createApp } from 'vue'
|
|
17
|
+
import ZBackgroundAnimation from 'zzy-background-animation'
|
|
18
|
+
|
|
19
|
+
const app = createApp(App)
|
|
20
|
+
app.use(ZBackgroundAnimation)
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
### 局部导入
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
import { ZBackground } from 'zzy-background-animation'
|
|
27
|
+
|
|
28
|
+
export default {
|
|
29
|
+
components: { ZBackground }
|
|
30
|
+
}
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### 基础用法
|
|
34
|
+
|
|
35
|
+
```tsx
|
|
36
|
+
<ZBackground bgImage="/path/to/your/image.png">
|
|
37
|
+
<div>你的页面内容</div>
|
|
38
|
+
</ZBackground>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Props
|
|
42
|
+
|
|
43
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
44
|
+
|------|------|--------|------|
|
|
45
|
+
| enablePulse | boolean | false | 脉冲光晕效果 |
|
|
46
|
+
| enableScan | boolean | false | 扫描线效果 |
|
|
47
|
+
| enableParticles | boolean | true | 粒子系统 |
|
|
48
|
+
| enableGrid | boolean | true | 透视网格动画 |
|
|
49
|
+
| enableRipple | boolean | false | 光波扩散效果 |
|
|
50
|
+
| enableGlitch | boolean | false | 故障艺术效果 |
|
|
51
|
+
| enableParallax | boolean | true | 视差滚动效果 |
|
|
52
|
+
| enableCursorGlow | boolean | false | 鼠标跟随光效 |
|
|
53
|
+
| particleCount | number | 50 | 粒子数量 |
|
|
54
|
+
| bgImage | string | '' | 背景图片路径 |
|
|
55
|
+
| showControls | boolean | false | 显示控制面板 |
|
|
56
|
+
|
|
57
|
+
## 示例
|
|
58
|
+
|
|
59
|
+
### 启用所有效果
|
|
60
|
+
|
|
61
|
+
```tsx
|
|
62
|
+
<ZBackground
|
|
63
|
+
bgImage="/bg.png"
|
|
64
|
+
enablePulse={true}
|
|
65
|
+
enableScan={true}
|
|
66
|
+
enableParticles={true}
|
|
67
|
+
enableGrid={true}
|
|
68
|
+
enableRipple={true}
|
|
69
|
+
enableGlitch={true}
|
|
70
|
+
enableParallax={true}
|
|
71
|
+
enableCursorGlow={true}
|
|
72
|
+
particleCount={100}
|
|
73
|
+
showControls={true}
|
|
74
|
+
>
|
|
75
|
+
<div>内容</div>
|
|
76
|
+
</ZBackground>
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### 仅粒子效果
|
|
80
|
+
|
|
81
|
+
```tsx
|
|
82
|
+
<ZBackground
|
|
83
|
+
bgImage="/bg.png"
|
|
84
|
+
enableParticles={true}
|
|
85
|
+
enableGrid={false}
|
|
86
|
+
particleCount={80}
|
|
87
|
+
>
|
|
88
|
+
<div>内容</div>
|
|
89
|
+
</ZBackground>
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
## 本地开发
|
|
93
|
+
|
|
94
|
+
```bash
|
|
95
|
+
# 克隆项目
|
|
96
|
+
git clone <repo-url>
|
|
97
|
+
cd zzy-background-animation
|
|
98
|
+
|
|
99
|
+
# 安装依赖
|
|
100
|
+
npm install
|
|
101
|
+
|
|
102
|
+
# 运行示例
|
|
103
|
+
npm run example
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
示例项目位于 `example` 目录，包含完整的组件演示。
|
|
107
|
+
|
|
108
|
+
## License
|
|
109
|
+
|
|
110
|
+
MIT
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
2
|
+
enablePulse: {
|
|
3
|
+
type: BooleanConstructor;
|
|
4
|
+
default: boolean;
|
|
5
|
+
};
|
|
6
|
+
enableScan: {
|
|
7
|
+
type: BooleanConstructor;
|
|
8
|
+
default: boolean;
|
|
9
|
+
};
|
|
10
|
+
enableParticles: {
|
|
11
|
+
type: BooleanConstructor;
|
|
12
|
+
default: boolean;
|
|
13
|
+
};
|
|
14
|
+
enableGrid: {
|
|
15
|
+
type: BooleanConstructor;
|
|
16
|
+
default: boolean;
|
|
17
|
+
};
|
|
18
|
+
enableRipple: {
|
|
19
|
+
type: BooleanConstructor;
|
|
20
|
+
default: boolean;
|
|
21
|
+
};
|
|
22
|
+
enableGlitch: {
|
|
23
|
+
type: BooleanConstructor;
|
|
24
|
+
default: boolean;
|
|
25
|
+
};
|
|
26
|
+
enableParallax: {
|
|
27
|
+
type: BooleanConstructor;
|
|
28
|
+
default: boolean;
|
|
29
|
+
};
|
|
30
|
+
enableCursorGlow: {
|
|
31
|
+
type: BooleanConstructor;
|
|
32
|
+
default: boolean;
|
|
33
|
+
};
|
|
34
|
+
particleCount: {
|
|
35
|
+
type: NumberConstructor;
|
|
36
|
+
default: number;
|
|
37
|
+
};
|
|
38
|
+
bgImage: {
|
|
39
|
+
type: StringConstructor;
|
|
40
|
+
default: string;
|
|
41
|
+
};
|
|
42
|
+
showControls: {
|
|
43
|
+
type: BooleanConstructor;
|
|
44
|
+
default: boolean;
|
|
45
|
+
};
|
|
46
|
+
}>, () => any, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
47
|
+
enablePulse: {
|
|
48
|
+
type: BooleanConstructor;
|
|
49
|
+
default: boolean;
|
|
50
|
+
};
|
|
51
|
+
enableScan: {
|
|
52
|
+
type: BooleanConstructor;
|
|
53
|
+
default: boolean;
|
|
54
|
+
};
|
|
55
|
+
enableParticles: {
|
|
56
|
+
type: BooleanConstructor;
|
|
57
|
+
default: boolean;
|
|
58
|
+
};
|
|
59
|
+
enableGrid: {
|
|
60
|
+
type: BooleanConstructor;
|
|
61
|
+
default: boolean;
|
|
62
|
+
};
|
|
63
|
+
enableRipple: {
|
|
64
|
+
type: BooleanConstructor;
|
|
65
|
+
default: boolean;
|
|
66
|
+
};
|
|
67
|
+
enableGlitch: {
|
|
68
|
+
type: BooleanConstructor;
|
|
69
|
+
default: boolean;
|
|
70
|
+
};
|
|
71
|
+
enableParallax: {
|
|
72
|
+
type: BooleanConstructor;
|
|
73
|
+
default: boolean;
|
|
74
|
+
};
|
|
75
|
+
enableCursorGlow: {
|
|
76
|
+
type: BooleanConstructor;
|
|
77
|
+
default: boolean;
|
|
78
|
+
};
|
|
79
|
+
particleCount: {
|
|
80
|
+
type: NumberConstructor;
|
|
81
|
+
default: number;
|
|
82
|
+
};
|
|
83
|
+
bgImage: {
|
|
84
|
+
type: StringConstructor;
|
|
85
|
+
default: string;
|
|
86
|
+
};
|
|
87
|
+
showControls: {
|
|
88
|
+
type: BooleanConstructor;
|
|
89
|
+
default: boolean;
|
|
90
|
+
};
|
|
91
|
+
}>> & Readonly<{}>, {
|
|
92
|
+
enablePulse: boolean;
|
|
93
|
+
enableScan: boolean;
|
|
94
|
+
enableParticles: boolean;
|
|
95
|
+
enableGrid: boolean;
|
|
96
|
+
enableRipple: boolean;
|
|
97
|
+
enableGlitch: boolean;
|
|
98
|
+
enableParallax: boolean;
|
|
99
|
+
enableCursorGlow: boolean;
|
|
100
|
+
particleCount: number;
|
|
101
|
+
bgImage: string;
|
|
102
|
+
showControls: boolean;
|
|
103
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
104
|
+
export default _default;
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { App } from 'vue';
|
|
2
|
+
import { default as ZBackground } from './ZBackground';
|
|
3
|
+
|
|
4
|
+
export { ZBackground };
|
|
5
|
+
declare const _default: {
|
|
6
|
+
install(app: App): void;
|
|
7
|
+
};
|
|
8
|
+
export default _default;
|
|
9
|
+
export interface ZBackgroundProps {
|
|
10
|
+
enablePulse?: boolean;
|
|
11
|
+
enableScan?: boolean;
|
|
12
|
+
enableParticles?: boolean;
|
|
13
|
+
enableGrid?: boolean;
|
|
14
|
+
enableRipple?: boolean;
|
|
15
|
+
enableGlitch?: boolean;
|
|
16
|
+
enableParallax?: boolean;
|
|
17
|
+
enableCursorGlow?: boolean;
|
|
18
|
+
particleCount?: number;
|
|
19
|
+
bgImage?: string;
|
|
20
|
+
showControls?: boolean;
|
|
21
|
+
}
|
package/dist/style.d.ts
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export declare const zBackgroundStyles = "\n.z-background {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n min-height: 100vh;\n overflow: hidden;\n pointer-events: none;\n}\n\n.z-background .bg-image {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: center/cover no-repeat;\n z-index: 1;\n}\n\n.z-background .parallax-bg {\n position: absolute;\n top: -20%;\n left: -10%;\n width: 120%;\n height: 140%;\n background: center/cover no-repeat;\n will-change: transform;\n z-index: 1;\n}\n\n.z-background .effect-container {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 2;\n}\n\n.z-background .effect-container > * {\n display: none;\n}\n\n.z-background .effect-container.active-pulse .pulse-overlay,\n.z-background .effect-container.active-scan .scan-line,\n.z-background .effect-container.active-particles .particles,\n.z-background .effect-container.active-grid .grid-overlay,\n.z-background .effect-container.active-ripple .ripple-container,\n.z-background .effect-container.active-glitch .glitch-layer {\n display: block;\n}\n\n.z-background .pulse-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: radial-gradient(ellipse at center, rgba(0,150,255,0.3) 0%, transparent 70%);\n animation: z-bg-pulse 4s ease-in-out infinite;\n pointer-events: none;\n}\n\n@keyframes z-bg-pulse {\n 0%, 100% { opacity: 0.3; transform: scale(1); }\n 50% { opacity: 0.6; transform: scale(1.1); }\n}\n\n.z-background .scan-line {\n position: absolute;\n top: -100%;\n left: 0;\n width: 100%;\n height: 20px;\n background: linear-gradient(to bottom, transparent, rgba(0,255,255,0.8), rgba(0,150,255,0.6), transparent);\n animation: z-bg-scan 6s linear infinite;\n pointer-events: none;\n filter: blur(2px);\n}\n\n@keyframes z-bg-scan {\n 0% { top: -10%; }\n 100% { top: 110%; }\n}\n\n.z-background .particles {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n overflow: hidden;\n}\n\n.z-background .particles .particle {\n position: absolute;\n width: 2px;\n height: 2px;\n background: rgba(0,255,255,0.8);\n border-radius: 50%;\n box-shadow: 0 0 6px rgba(0,255,255,0.8);\n animation: z-bg-float-up linear infinite;\n}\n\n@keyframes z-bg-float-up {\n 0% { transform: translateY(0) scale(0); opacity: 0; }\n 10% { opacity: 1; }\n 90% { opacity: 1; }\n 100% { transform: translateY(-200vh) scale(1.5); opacity: 0; }\n}\n\n.z-background .grid-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: linear-gradient(rgba(0,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,255,0.03) 1px, transparent 1px);\n background-size: 50px 50px;\n animation: z-bg-grid-move 20s linear infinite;\n pointer-events: none;\n}\n\n@keyframes z-bg-grid-move {\n 0% { transform: perspective(500px) rotateX(60deg) translateY(0); }\n 100% { transform: perspective(500px) rotateX(60deg) translateY(50px); }\n}\n\n.z-background .ripple-container {\n display: none;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n.z-background .ripple-container .ripple {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0;\n height: 0;\n border: 2px solid rgba(0,255,255,0.5);\n border-radius: 50%;\n animation: z-bg-ripple-effect 3s ease-out infinite;\n}\n\n.z-background .ripple-container .ripple:nth-child(2) { animation-delay: 1s; }\n.z-background .ripple-container .ripple:nth-child(3) { animation-delay: 2s; }\n\n@keyframes z-bg-ripple-effect {\n 0% { width: 0; height: 0; opacity: 1; }\n 100% { width: 800px; height: 800px; opacity: 0; }\n}\n\n.z-background .glitch-layer {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: center/cover no-repeat;\n opacity: 0.1;\n mix-blend-mode: screen;\n animation: z-bg-glitch 5s infinite;\n pointer-events: none;\n}\n\n@keyframes z-bg-glitch {\n 0%, 90%, 100% { transform: translate(0); filter: hue-rotate(0deg); }\n 92% { transform: translate(-5px, 0); filter: hue-rotate(90deg); }\n 94% { transform: translate(5px, 0); filter: hue-rotate(-90deg); }\n 96% { transform: translate(0, 2px); }\n}\n\n.z-background .cursor-glow {\n position: fixed;\n width: 300px;\n height: 300px;\n background: radial-gradient(circle, rgba(0,255,255,0.15) 0%, transparent 70%);\n border-radius: 50%;\n pointer-events: none;\n z-index: 5;\n transform: translate(-50%, -50%);\n transition: opacity 0.3s;\n}\n\n.z-background .z-background-content {\n position: relative;\n z-index: 10;\n min-height: 100vh;\n}\n\n.z-background .controls {\n position: fixed;\n right: 20px;\n top: 50%;\n transform: translateY(-50%);\n z-index: 100;\n background: rgba(0,0,0,0.8);\n padding: 20px;\n border-radius: 10px;\n border: 1px solid rgba(0,255,255,0.3);\n backdrop-filter: blur(10px);\n pointer-events: auto;\n}\n\n.z-background .controls h3 {\n color: #00ffff;\n margin-bottom: 15px;\n font-size: 14px;\n text-align: center;\n}\n\n.z-background .controls .control-btn {\n display: block;\n width: 100%;\n padding: 10px 20px;\n margin: 10px 0;\n background: transparent;\n border: 1px solid rgba(0,255,255,0.5);\n color: #00ffff;\n cursor: pointer;\n transition: all 0.3s;\n font-size: 12px;\n letter-spacing: 2px;\n text-transform: uppercase;\n}\n\n.z-background .controls .control-btn:hover,\n.z-background .controls .control-btn.active {\n background: rgba(0,255,255,0.2);\n box-shadow: 0 0 20px rgba(0,255,255,0.5);\n}\n\n@keyframes z-bg-ripple-click-effect {\n 0% { width: 0; height: 0; opacity: 1; }\n 100% { width: 100px; height: 100px; opacity: 0; }\n}\n";
|
|
2
|
+
export declare function injectStyles(): void;
|
|
@@ -0,0 +1,446 @@
|
|
|
1
|
+
import { defineComponent as k, ref as s, onMounted as z, onUnmounted as w, createVNode as t, createTextVNode as r } from "vue";
|
|
2
|
+
const C = `
|
|
3
|
+
.z-background {
|
|
4
|
+
position: absolute;
|
|
5
|
+
left: 0;
|
|
6
|
+
top: 0;
|
|
7
|
+
width: 100%;
|
|
8
|
+
min-height: 100vh;
|
|
9
|
+
overflow: hidden;
|
|
10
|
+
pointer-events: none;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.z-background .bg-image {
|
|
14
|
+
position: absolute;
|
|
15
|
+
top: 0;
|
|
16
|
+
left: 0;
|
|
17
|
+
width: 100%;
|
|
18
|
+
height: 100%;
|
|
19
|
+
background: center/cover no-repeat;
|
|
20
|
+
z-index: 1;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.z-background .parallax-bg {
|
|
24
|
+
position: absolute;
|
|
25
|
+
top: -20%;
|
|
26
|
+
left: -10%;
|
|
27
|
+
width: 120%;
|
|
28
|
+
height: 140%;
|
|
29
|
+
background: center/cover no-repeat;
|
|
30
|
+
will-change: transform;
|
|
31
|
+
z-index: 1;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.z-background .effect-container {
|
|
35
|
+
position: absolute;
|
|
36
|
+
top: 0;
|
|
37
|
+
left: 0;
|
|
38
|
+
width: 100%;
|
|
39
|
+
height: 100%;
|
|
40
|
+
z-index: 2;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.z-background .effect-container > * {
|
|
44
|
+
display: none;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.z-background .effect-container.active-pulse .pulse-overlay,
|
|
48
|
+
.z-background .effect-container.active-scan .scan-line,
|
|
49
|
+
.z-background .effect-container.active-particles .particles,
|
|
50
|
+
.z-background .effect-container.active-grid .grid-overlay,
|
|
51
|
+
.z-background .effect-container.active-ripple .ripple-container,
|
|
52
|
+
.z-background .effect-container.active-glitch .glitch-layer {
|
|
53
|
+
display: block;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.z-background .pulse-overlay {
|
|
57
|
+
position: absolute;
|
|
58
|
+
top: 0;
|
|
59
|
+
left: 0;
|
|
60
|
+
width: 100%;
|
|
61
|
+
height: 100%;
|
|
62
|
+
background: radial-gradient(ellipse at center, rgba(0,150,255,0.3) 0%, transparent 70%);
|
|
63
|
+
animation: z-bg-pulse 4s ease-in-out infinite;
|
|
64
|
+
pointer-events: none;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
@keyframes z-bg-pulse {
|
|
68
|
+
0%, 100% { opacity: 0.3; transform: scale(1); }
|
|
69
|
+
50% { opacity: 0.6; transform: scale(1.1); }
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.z-background .scan-line {
|
|
73
|
+
position: absolute;
|
|
74
|
+
top: -100%;
|
|
75
|
+
left: 0;
|
|
76
|
+
width: 100%;
|
|
77
|
+
height: 20px;
|
|
78
|
+
background: linear-gradient(to bottom, transparent, rgba(0,255,255,0.8), rgba(0,150,255,0.6), transparent);
|
|
79
|
+
animation: z-bg-scan 6s linear infinite;
|
|
80
|
+
pointer-events: none;
|
|
81
|
+
filter: blur(2px);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
@keyframes z-bg-scan {
|
|
85
|
+
0% { top: -10%; }
|
|
86
|
+
100% { top: 110%; }
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.z-background .particles {
|
|
90
|
+
position: absolute;
|
|
91
|
+
top: 0;
|
|
92
|
+
left: 0;
|
|
93
|
+
width: 100%;
|
|
94
|
+
height: 100%;
|
|
95
|
+
pointer-events: none;
|
|
96
|
+
overflow: hidden;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.z-background .particles .particle {
|
|
100
|
+
position: absolute;
|
|
101
|
+
width: 2px;
|
|
102
|
+
height: 2px;
|
|
103
|
+
background: rgba(0,255,255,0.8);
|
|
104
|
+
border-radius: 50%;
|
|
105
|
+
box-shadow: 0 0 6px rgba(0,255,255,0.8);
|
|
106
|
+
animation: z-bg-float-up linear infinite;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
@keyframes z-bg-float-up {
|
|
110
|
+
0% { transform: translateY(0) scale(0); opacity: 0; }
|
|
111
|
+
10% { opacity: 1; }
|
|
112
|
+
90% { opacity: 1; }
|
|
113
|
+
100% { transform: translateY(-200vh) scale(1.5); opacity: 0; }
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.z-background .grid-overlay {
|
|
117
|
+
position: absolute;
|
|
118
|
+
top: 0;
|
|
119
|
+
left: 0;
|
|
120
|
+
width: 100%;
|
|
121
|
+
height: 100%;
|
|
122
|
+
background-image: linear-gradient(rgba(0,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,255,0.03) 1px, transparent 1px);
|
|
123
|
+
background-size: 50px 50px;
|
|
124
|
+
animation: z-bg-grid-move 20s linear infinite;
|
|
125
|
+
pointer-events: none;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
@keyframes z-bg-grid-move {
|
|
129
|
+
0% { transform: perspective(500px) rotateX(60deg) translateY(0); }
|
|
130
|
+
100% { transform: perspective(500px) rotateX(60deg) translateY(50px); }
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.z-background .ripple-container {
|
|
134
|
+
display: none;
|
|
135
|
+
position: absolute;
|
|
136
|
+
top: 0;
|
|
137
|
+
left: 0;
|
|
138
|
+
width: 100%;
|
|
139
|
+
height: 100%;
|
|
140
|
+
pointer-events: none;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.z-background .ripple-container .ripple {
|
|
144
|
+
position: absolute;
|
|
145
|
+
top: 50%;
|
|
146
|
+
left: 50%;
|
|
147
|
+
transform: translate(-50%, -50%);
|
|
148
|
+
width: 0;
|
|
149
|
+
height: 0;
|
|
150
|
+
border: 2px solid rgba(0,255,255,0.5);
|
|
151
|
+
border-radius: 50%;
|
|
152
|
+
animation: z-bg-ripple-effect 3s ease-out infinite;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.z-background .ripple-container .ripple:nth-child(2) { animation-delay: 1s; }
|
|
156
|
+
.z-background .ripple-container .ripple:nth-child(3) { animation-delay: 2s; }
|
|
157
|
+
|
|
158
|
+
@keyframes z-bg-ripple-effect {
|
|
159
|
+
0% { width: 0; height: 0; opacity: 1; }
|
|
160
|
+
100% { width: 800px; height: 800px; opacity: 0; }
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.z-background .glitch-layer {
|
|
164
|
+
position: absolute;
|
|
165
|
+
top: 0;
|
|
166
|
+
left: 0;
|
|
167
|
+
width: 100%;
|
|
168
|
+
height: 100%;
|
|
169
|
+
background: center/cover no-repeat;
|
|
170
|
+
opacity: 0.1;
|
|
171
|
+
mix-blend-mode: screen;
|
|
172
|
+
animation: z-bg-glitch 5s infinite;
|
|
173
|
+
pointer-events: none;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
@keyframes z-bg-glitch {
|
|
177
|
+
0%, 90%, 100% { transform: translate(0); filter: hue-rotate(0deg); }
|
|
178
|
+
92% { transform: translate(-5px, 0); filter: hue-rotate(90deg); }
|
|
179
|
+
94% { transform: translate(5px, 0); filter: hue-rotate(-90deg); }
|
|
180
|
+
96% { transform: translate(0, 2px); }
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.z-background .cursor-glow {
|
|
184
|
+
position: fixed;
|
|
185
|
+
width: 300px;
|
|
186
|
+
height: 300px;
|
|
187
|
+
background: radial-gradient(circle, rgba(0,255,255,0.15) 0%, transparent 70%);
|
|
188
|
+
border-radius: 50%;
|
|
189
|
+
pointer-events: none;
|
|
190
|
+
z-index: 5;
|
|
191
|
+
transform: translate(-50%, -50%);
|
|
192
|
+
transition: opacity 0.3s;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.z-background .z-background-content {
|
|
196
|
+
position: relative;
|
|
197
|
+
z-index: 10;
|
|
198
|
+
min-height: 100vh;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.z-background .controls {
|
|
202
|
+
position: fixed;
|
|
203
|
+
right: 20px;
|
|
204
|
+
top: 50%;
|
|
205
|
+
transform: translateY(-50%);
|
|
206
|
+
z-index: 100;
|
|
207
|
+
background: rgba(0,0,0,0.8);
|
|
208
|
+
padding: 20px;
|
|
209
|
+
border-radius: 10px;
|
|
210
|
+
border: 1px solid rgba(0,255,255,0.3);
|
|
211
|
+
backdrop-filter: blur(10px);
|
|
212
|
+
pointer-events: auto;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.z-background .controls h3 {
|
|
216
|
+
color: #00ffff;
|
|
217
|
+
margin-bottom: 15px;
|
|
218
|
+
font-size: 14px;
|
|
219
|
+
text-align: center;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.z-background .controls .control-btn {
|
|
223
|
+
display: block;
|
|
224
|
+
width: 100%;
|
|
225
|
+
padding: 10px 20px;
|
|
226
|
+
margin: 10px 0;
|
|
227
|
+
background: transparent;
|
|
228
|
+
border: 1px solid rgba(0,255,255,0.5);
|
|
229
|
+
color: #00ffff;
|
|
230
|
+
cursor: pointer;
|
|
231
|
+
transition: all 0.3s;
|
|
232
|
+
font-size: 12px;
|
|
233
|
+
letter-spacing: 2px;
|
|
234
|
+
text-transform: uppercase;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.z-background .controls .control-btn:hover,
|
|
238
|
+
.z-background .controls .control-btn.active {
|
|
239
|
+
background: rgba(0,255,255,0.2);
|
|
240
|
+
box-shadow: 0 0 20px rgba(0,255,255,0.5);
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
@keyframes z-bg-ripple-click-effect {
|
|
244
|
+
0% { width: 0; height: 0; opacity: 1; }
|
|
245
|
+
100% { width: 100px; height: 100px; opacity: 0; }
|
|
246
|
+
}
|
|
247
|
+
`;
|
|
248
|
+
let m = !1;
|
|
249
|
+
function B() {
|
|
250
|
+
if (m || typeof document > "u") return;
|
|
251
|
+
const e = document.createElement("style");
|
|
252
|
+
e.textContent = C, document.head.appendChild(e), m = !0;
|
|
253
|
+
}
|
|
254
|
+
const E = /* @__PURE__ */ k({
|
|
255
|
+
name: "ZBackground",
|
|
256
|
+
props: {
|
|
257
|
+
// 是否启用脉冲光晕效果
|
|
258
|
+
enablePulse: {
|
|
259
|
+
type: Boolean,
|
|
260
|
+
default: !1
|
|
261
|
+
},
|
|
262
|
+
// 是否启用扫描线效果
|
|
263
|
+
enableScan: {
|
|
264
|
+
type: Boolean,
|
|
265
|
+
default: !1
|
|
266
|
+
},
|
|
267
|
+
// 是否启用粒子系统
|
|
268
|
+
enableParticles: {
|
|
269
|
+
type: Boolean,
|
|
270
|
+
default: !0
|
|
271
|
+
},
|
|
272
|
+
// 是否启用网格动画
|
|
273
|
+
enableGrid: {
|
|
274
|
+
type: Boolean,
|
|
275
|
+
default: !0
|
|
276
|
+
},
|
|
277
|
+
// 是否启用光波扩散
|
|
278
|
+
enableRipple: {
|
|
279
|
+
type: Boolean,
|
|
280
|
+
default: !1
|
|
281
|
+
},
|
|
282
|
+
// 是否启用故障艺术效果
|
|
283
|
+
enableGlitch: {
|
|
284
|
+
type: Boolean,
|
|
285
|
+
default: !1
|
|
286
|
+
},
|
|
287
|
+
// 是否启用视差滚动
|
|
288
|
+
enableParallax: {
|
|
289
|
+
type: Boolean,
|
|
290
|
+
default: !0
|
|
291
|
+
},
|
|
292
|
+
// 是否启用鼠标跟随光效
|
|
293
|
+
enableCursorGlow: {
|
|
294
|
+
type: Boolean,
|
|
295
|
+
default: !1
|
|
296
|
+
},
|
|
297
|
+
// 粒子数量
|
|
298
|
+
particleCount: {
|
|
299
|
+
type: Number,
|
|
300
|
+
default: 50
|
|
301
|
+
},
|
|
302
|
+
// 背景图片地址
|
|
303
|
+
bgImage: {
|
|
304
|
+
type: String,
|
|
305
|
+
default: ""
|
|
306
|
+
},
|
|
307
|
+
// 是否显示控制按钮
|
|
308
|
+
showControls: {
|
|
309
|
+
type: Boolean,
|
|
310
|
+
default: !1
|
|
311
|
+
}
|
|
312
|
+
},
|
|
313
|
+
setup(e, {
|
|
314
|
+
slots: u
|
|
315
|
+
}) {
|
|
316
|
+
const y = s(), p = s(), d = s(), g = s(), l = s({
|
|
317
|
+
pulse: e.enablePulse,
|
|
318
|
+
scan: e.enableScan,
|
|
319
|
+
particles: e.enableParticles,
|
|
320
|
+
grid: e.enableGrid,
|
|
321
|
+
ripple: e.enableRipple,
|
|
322
|
+
glitch: e.enableGlitch
|
|
323
|
+
}), i = (a) => {
|
|
324
|
+
l.value[a] = !l.value[a];
|
|
325
|
+
}, x = () => {
|
|
326
|
+
if (!g.value) return;
|
|
327
|
+
const a = g.value;
|
|
328
|
+
a.innerHTML = "";
|
|
329
|
+
for (let n = 0; n < e.particleCount; n++) {
|
|
330
|
+
const o = document.createElement("div");
|
|
331
|
+
o.className = "particle", o.style.left = Math.random() * 100 + "%", o.style.top = Math.random() * 100 + 100 + "vh", o.style.animationDuration = Math.random() * 10 + 5 + "s", o.style.animationDelay = Math.random() * 5 + "s";
|
|
332
|
+
const v = Math.random() * 3 + 1;
|
|
333
|
+
o.style.width = v + "px", o.style.height = v + "px", a.appendChild(o);
|
|
334
|
+
}
|
|
335
|
+
}, b = () => {
|
|
336
|
+
if (!e.enableParallax || !p.value) return;
|
|
337
|
+
const a = window.pageYOffset;
|
|
338
|
+
p.value.style.transform = `translateY(${a * 0.5}px) scale(1.1)`;
|
|
339
|
+
}, f = (a) => {
|
|
340
|
+
!e.enableCursorGlow || !d.value || (d.value.style.left = a.clientX + "px", d.value.style.top = a.clientY + "px");
|
|
341
|
+
}, h = (a) => {
|
|
342
|
+
const n = document.createElement("div");
|
|
343
|
+
n.style.position = "fixed", n.style.left = a.clientX + "px", n.style.top = a.clientY + "px", n.style.width = "0", n.style.height = "0", n.style.border = "2px solid rgba(0,255,255,0.8)", n.style.borderRadius = "50%", n.style.transform = "translate(-50%, -50%)", n.style.pointerEvents = "none", n.style.zIndex = "9999", n.style.animation = "ripple-click-effect 0.6s ease-out forwards", document.body.appendChild(n), setTimeout(() => n.remove(), 600);
|
|
344
|
+
};
|
|
345
|
+
z(() => {
|
|
346
|
+
B(), x(), e.enableParallax && window.addEventListener("scroll", b), e.enableCursorGlow && document.addEventListener("mousemove", f), document.addEventListener("click", h);
|
|
347
|
+
}), w(() => {
|
|
348
|
+
window.removeEventListener("scroll", b), document.removeEventListener("mousemove", f), document.removeEventListener("click", h);
|
|
349
|
+
});
|
|
350
|
+
const c = e.bgImage ? (e.bgImage.startsWith("http") || e.bgImage.startsWith("data:"), e.bgImage) : "";
|
|
351
|
+
return () => {
|
|
352
|
+
var a;
|
|
353
|
+
return t("div", {
|
|
354
|
+
class: "z-background"
|
|
355
|
+
}, [c && t("div", {
|
|
356
|
+
class: "bg-image",
|
|
357
|
+
style: {
|
|
358
|
+
backgroundImage: `url(${c})`
|
|
359
|
+
}
|
|
360
|
+
}, null), e.enableParallax && c && t("div", {
|
|
361
|
+
class: "parallax-bg",
|
|
362
|
+
ref: p,
|
|
363
|
+
style: {
|
|
364
|
+
backgroundImage: `url(${c})`
|
|
365
|
+
}
|
|
366
|
+
}, null), t("div", {
|
|
367
|
+
class: ["effect-container", {
|
|
368
|
+
"active-pulse": l.value.pulse,
|
|
369
|
+
"active-scan": l.value.scan,
|
|
370
|
+
"active-particles": l.value.particles,
|
|
371
|
+
"active-grid": l.value.grid,
|
|
372
|
+
"active-ripple": l.value.ripple,
|
|
373
|
+
"active-glitch": l.value.glitch
|
|
374
|
+
}],
|
|
375
|
+
ref: y
|
|
376
|
+
}, [t("div", {
|
|
377
|
+
class: "pulse-overlay"
|
|
378
|
+
}, null), t("div", {
|
|
379
|
+
class: "scan-line"
|
|
380
|
+
}, null), t("div", {
|
|
381
|
+
class: "particles",
|
|
382
|
+
ref: g
|
|
383
|
+
}, null), t("div", {
|
|
384
|
+
class: "grid-overlay"
|
|
385
|
+
}, null), t("div", {
|
|
386
|
+
class: "ripple-container"
|
|
387
|
+
}, [t("div", {
|
|
388
|
+
class: "ripple"
|
|
389
|
+
}, null), t("div", {
|
|
390
|
+
class: "ripple"
|
|
391
|
+
}, null), t("div", {
|
|
392
|
+
class: "ripple"
|
|
393
|
+
}, null)]), c && t("div", {
|
|
394
|
+
class: "glitch-layer",
|
|
395
|
+
style: {
|
|
396
|
+
backgroundImage: `url(${c})`
|
|
397
|
+
}
|
|
398
|
+
}, null)]), e.enableCursorGlow && t("div", {
|
|
399
|
+
class: "cursor-glow",
|
|
400
|
+
ref: d
|
|
401
|
+
}, null), t("div", {
|
|
402
|
+
class: "z-background-content"
|
|
403
|
+
}, [(a = u.default) == null ? void 0 : a.call(u)]), e.showControls && t("div", {
|
|
404
|
+
class: "controls"
|
|
405
|
+
}, [t("h3", null, [r("效果控制")]), t("button", {
|
|
406
|
+
class: ["control-btn", {
|
|
407
|
+
active: l.value.pulse
|
|
408
|
+
}],
|
|
409
|
+
onClick: () => i("pulse")
|
|
410
|
+
}, [r("脉冲光晕")]), t("button", {
|
|
411
|
+
class: ["control-btn", {
|
|
412
|
+
active: l.value.scan
|
|
413
|
+
}],
|
|
414
|
+
onClick: () => i("scan")
|
|
415
|
+
}, [r("扫描线")]), t("button", {
|
|
416
|
+
class: ["control-btn", {
|
|
417
|
+
active: l.value.particles
|
|
418
|
+
}],
|
|
419
|
+
onClick: () => i("particles")
|
|
420
|
+
}, [r("粒子系统")]), t("button", {
|
|
421
|
+
class: ["control-btn", {
|
|
422
|
+
active: l.value.grid
|
|
423
|
+
}],
|
|
424
|
+
onClick: () => i("grid")
|
|
425
|
+
}, [r("透视网格")]), t("button", {
|
|
426
|
+
class: ["control-btn", {
|
|
427
|
+
active: l.value.ripple
|
|
428
|
+
}],
|
|
429
|
+
onClick: () => i("ripple")
|
|
430
|
+
}, [r("光波扩散")]), t("button", {
|
|
431
|
+
class: ["control-btn", {
|
|
432
|
+
active: l.value.glitch
|
|
433
|
+
}],
|
|
434
|
+
onClick: () => i("glitch")
|
|
435
|
+
}, [r("故障艺术")])])]);
|
|
436
|
+
};
|
|
437
|
+
}
|
|
438
|
+
}), M = {
|
|
439
|
+
install(e) {
|
|
440
|
+
e.component("ZBackground", E);
|
|
441
|
+
}
|
|
442
|
+
};
|
|
443
|
+
export {
|
|
444
|
+
E as ZBackground,
|
|
445
|
+
M as default
|
|
446
|
+
};
|
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.ZzyBackgroundAnimation={},r.Vue))})(this,function(r,e){"use strict";const x=`
|
|
2
|
+
.z-background {
|
|
3
|
+
position: absolute;
|
|
4
|
+
left: 0;
|
|
5
|
+
top: 0;
|
|
6
|
+
width: 100%;
|
|
7
|
+
min-height: 100vh;
|
|
8
|
+
overflow: hidden;
|
|
9
|
+
pointer-events: none;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.z-background .bg-image {
|
|
13
|
+
position: absolute;
|
|
14
|
+
top: 0;
|
|
15
|
+
left: 0;
|
|
16
|
+
width: 100%;
|
|
17
|
+
height: 100%;
|
|
18
|
+
background: center/cover no-repeat;
|
|
19
|
+
z-index: 1;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.z-background .parallax-bg {
|
|
23
|
+
position: absolute;
|
|
24
|
+
top: -20%;
|
|
25
|
+
left: -10%;
|
|
26
|
+
width: 120%;
|
|
27
|
+
height: 140%;
|
|
28
|
+
background: center/cover no-repeat;
|
|
29
|
+
will-change: transform;
|
|
30
|
+
z-index: 1;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.z-background .effect-container {
|
|
34
|
+
position: absolute;
|
|
35
|
+
top: 0;
|
|
36
|
+
left: 0;
|
|
37
|
+
width: 100%;
|
|
38
|
+
height: 100%;
|
|
39
|
+
z-index: 2;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.z-background .effect-container > * {
|
|
43
|
+
display: none;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.z-background .effect-container.active-pulse .pulse-overlay,
|
|
47
|
+
.z-background .effect-container.active-scan .scan-line,
|
|
48
|
+
.z-background .effect-container.active-particles .particles,
|
|
49
|
+
.z-background .effect-container.active-grid .grid-overlay,
|
|
50
|
+
.z-background .effect-container.active-ripple .ripple-container,
|
|
51
|
+
.z-background .effect-container.active-glitch .glitch-layer {
|
|
52
|
+
display: block;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.z-background .pulse-overlay {
|
|
56
|
+
position: absolute;
|
|
57
|
+
top: 0;
|
|
58
|
+
left: 0;
|
|
59
|
+
width: 100%;
|
|
60
|
+
height: 100%;
|
|
61
|
+
background: radial-gradient(ellipse at center, rgba(0,150,255,0.3) 0%, transparent 70%);
|
|
62
|
+
animation: z-bg-pulse 4s ease-in-out infinite;
|
|
63
|
+
pointer-events: none;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
@keyframes z-bg-pulse {
|
|
67
|
+
0%, 100% { opacity: 0.3; transform: scale(1); }
|
|
68
|
+
50% { opacity: 0.6; transform: scale(1.1); }
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.z-background .scan-line {
|
|
72
|
+
position: absolute;
|
|
73
|
+
top: -100%;
|
|
74
|
+
left: 0;
|
|
75
|
+
width: 100%;
|
|
76
|
+
height: 20px;
|
|
77
|
+
background: linear-gradient(to bottom, transparent, rgba(0,255,255,0.8), rgba(0,150,255,0.6), transparent);
|
|
78
|
+
animation: z-bg-scan 6s linear infinite;
|
|
79
|
+
pointer-events: none;
|
|
80
|
+
filter: blur(2px);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
@keyframes z-bg-scan {
|
|
84
|
+
0% { top: -10%; }
|
|
85
|
+
100% { top: 110%; }
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.z-background .particles {
|
|
89
|
+
position: absolute;
|
|
90
|
+
top: 0;
|
|
91
|
+
left: 0;
|
|
92
|
+
width: 100%;
|
|
93
|
+
height: 100%;
|
|
94
|
+
pointer-events: none;
|
|
95
|
+
overflow: hidden;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.z-background .particles .particle {
|
|
99
|
+
position: absolute;
|
|
100
|
+
width: 2px;
|
|
101
|
+
height: 2px;
|
|
102
|
+
background: rgba(0,255,255,0.8);
|
|
103
|
+
border-radius: 50%;
|
|
104
|
+
box-shadow: 0 0 6px rgba(0,255,255,0.8);
|
|
105
|
+
animation: z-bg-float-up linear infinite;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
@keyframes z-bg-float-up {
|
|
109
|
+
0% { transform: translateY(0) scale(0); opacity: 0; }
|
|
110
|
+
10% { opacity: 1; }
|
|
111
|
+
90% { opacity: 1; }
|
|
112
|
+
100% { transform: translateY(-200vh) scale(1.5); opacity: 0; }
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.z-background .grid-overlay {
|
|
116
|
+
position: absolute;
|
|
117
|
+
top: 0;
|
|
118
|
+
left: 0;
|
|
119
|
+
width: 100%;
|
|
120
|
+
height: 100%;
|
|
121
|
+
background-image: linear-gradient(rgba(0,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,255,0.03) 1px, transparent 1px);
|
|
122
|
+
background-size: 50px 50px;
|
|
123
|
+
animation: z-bg-grid-move 20s linear infinite;
|
|
124
|
+
pointer-events: none;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
@keyframes z-bg-grid-move {
|
|
128
|
+
0% { transform: perspective(500px) rotateX(60deg) translateY(0); }
|
|
129
|
+
100% { transform: perspective(500px) rotateX(60deg) translateY(50px); }
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.z-background .ripple-container {
|
|
133
|
+
display: none;
|
|
134
|
+
position: absolute;
|
|
135
|
+
top: 0;
|
|
136
|
+
left: 0;
|
|
137
|
+
width: 100%;
|
|
138
|
+
height: 100%;
|
|
139
|
+
pointer-events: none;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.z-background .ripple-container .ripple {
|
|
143
|
+
position: absolute;
|
|
144
|
+
top: 50%;
|
|
145
|
+
left: 50%;
|
|
146
|
+
transform: translate(-50%, -50%);
|
|
147
|
+
width: 0;
|
|
148
|
+
height: 0;
|
|
149
|
+
border: 2px solid rgba(0,255,255,0.5);
|
|
150
|
+
border-radius: 50%;
|
|
151
|
+
animation: z-bg-ripple-effect 3s ease-out infinite;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.z-background .ripple-container .ripple:nth-child(2) { animation-delay: 1s; }
|
|
155
|
+
.z-background .ripple-container .ripple:nth-child(3) { animation-delay: 2s; }
|
|
156
|
+
|
|
157
|
+
@keyframes z-bg-ripple-effect {
|
|
158
|
+
0% { width: 0; height: 0; opacity: 1; }
|
|
159
|
+
100% { width: 800px; height: 800px; opacity: 0; }
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.z-background .glitch-layer {
|
|
163
|
+
position: absolute;
|
|
164
|
+
top: 0;
|
|
165
|
+
left: 0;
|
|
166
|
+
width: 100%;
|
|
167
|
+
height: 100%;
|
|
168
|
+
background: center/cover no-repeat;
|
|
169
|
+
opacity: 0.1;
|
|
170
|
+
mix-blend-mode: screen;
|
|
171
|
+
animation: z-bg-glitch 5s infinite;
|
|
172
|
+
pointer-events: none;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
@keyframes z-bg-glitch {
|
|
176
|
+
0%, 90%, 100% { transform: translate(0); filter: hue-rotate(0deg); }
|
|
177
|
+
92% { transform: translate(-5px, 0); filter: hue-rotate(90deg); }
|
|
178
|
+
94% { transform: translate(5px, 0); filter: hue-rotate(-90deg); }
|
|
179
|
+
96% { transform: translate(0, 2px); }
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.z-background .cursor-glow {
|
|
183
|
+
position: fixed;
|
|
184
|
+
width: 300px;
|
|
185
|
+
height: 300px;
|
|
186
|
+
background: radial-gradient(circle, rgba(0,255,255,0.15) 0%, transparent 70%);
|
|
187
|
+
border-radius: 50%;
|
|
188
|
+
pointer-events: none;
|
|
189
|
+
z-index: 5;
|
|
190
|
+
transform: translate(-50%, -50%);
|
|
191
|
+
transition: opacity 0.3s;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.z-background .z-background-content {
|
|
195
|
+
position: relative;
|
|
196
|
+
z-index: 10;
|
|
197
|
+
min-height: 100vh;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.z-background .controls {
|
|
201
|
+
position: fixed;
|
|
202
|
+
right: 20px;
|
|
203
|
+
top: 50%;
|
|
204
|
+
transform: translateY(-50%);
|
|
205
|
+
z-index: 100;
|
|
206
|
+
background: rgba(0,0,0,0.8);
|
|
207
|
+
padding: 20px;
|
|
208
|
+
border-radius: 10px;
|
|
209
|
+
border: 1px solid rgba(0,255,255,0.3);
|
|
210
|
+
backdrop-filter: blur(10px);
|
|
211
|
+
pointer-events: auto;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.z-background .controls h3 {
|
|
215
|
+
color: #00ffff;
|
|
216
|
+
margin-bottom: 15px;
|
|
217
|
+
font-size: 14px;
|
|
218
|
+
text-align: center;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.z-background .controls .control-btn {
|
|
222
|
+
display: block;
|
|
223
|
+
width: 100%;
|
|
224
|
+
padding: 10px 20px;
|
|
225
|
+
margin: 10px 0;
|
|
226
|
+
background: transparent;
|
|
227
|
+
border: 1px solid rgba(0,255,255,0.5);
|
|
228
|
+
color: #00ffff;
|
|
229
|
+
cursor: pointer;
|
|
230
|
+
transition: all 0.3s;
|
|
231
|
+
font-size: 12px;
|
|
232
|
+
letter-spacing: 2px;
|
|
233
|
+
text-transform: uppercase;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.z-background .controls .control-btn:hover,
|
|
237
|
+
.z-background .controls .control-btn.active {
|
|
238
|
+
background: rgba(0,255,255,0.2);
|
|
239
|
+
box-shadow: 0 0 20px rgba(0,255,255,0.5);
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
@keyframes z-bg-ripple-click-effect {
|
|
243
|
+
0% { width: 0; height: 0; opacity: 1; }
|
|
244
|
+
100% { width: 100px; height: 100px; opacity: 0; }
|
|
245
|
+
}
|
|
246
|
+
`;let g=!1;function k(){if(g||typeof document>"u")return;const t=document.createElement("style");t.textContent=x,document.head.appendChild(t),g=!0}const f=e.defineComponent({name:"ZBackground",props:{enablePulse:{type:Boolean,default:!1},enableScan:{type:Boolean,default:!1},enableParticles:{type:Boolean,default:!0},enableGrid:{type:Boolean,default:!0},enableRipple:{type:Boolean,default:!1},enableGlitch:{type:Boolean,default:!1},enableParallax:{type:Boolean,default:!0},enableCursorGlow:{type:Boolean,default:!1},particleCount:{type:Number,default:50},bgImage:{type:String,default:""},showControls:{type:Boolean,default:!1}},setup(t,{slots:d}){const z=e.ref(),p=e.ref(),s=e.ref(),u=e.ref(),o=e.ref({pulse:t.enablePulse,scan:t.enableScan,particles:t.enableParticles,grid:t.enableGrid,ripple:t.enableRipple,glitch:t.enableGlitch}),l=a=>{o.value[a]=!o.value[a]},w=()=>{if(!u.value)return;const a=u.value;a.innerHTML="";for(let n=0;n<t.particleCount;n++){const i=document.createElement("div");i.className="particle",i.style.left=Math.random()*100+"%",i.style.top=Math.random()*100+100+"vh",i.style.animationDuration=Math.random()*10+5+"s",i.style.animationDelay=Math.random()*5+"s";const y=Math.random()*3+1;i.style.width=y+"px",i.style.height=y+"px",a.appendChild(i)}},b=()=>{if(!t.enableParallax||!p.value)return;const a=window.pageYOffset;p.value.style.transform=`translateY(${a*.5}px) scale(1.1)`},h=a=>{!t.enableCursorGlow||!s.value||(s.value.style.left=a.clientX+"px",s.value.style.top=a.clientY+"px")},m=a=>{const n=document.createElement("div");n.style.position="fixed",n.style.left=a.clientX+"px",n.style.top=a.clientY+"px",n.style.width="0",n.style.height="0",n.style.border="2px solid rgba(0,255,255,0.8)",n.style.borderRadius="50%",n.style.transform="translate(-50%, -50%)",n.style.pointerEvents="none",n.style.zIndex="9999",n.style.animation="ripple-click-effect 0.6s ease-out forwards",document.body.appendChild(n),setTimeout(()=>n.remove(),600)};e.onMounted(()=>{k(),w(),t.enableParallax&&window.addEventListener("scroll",b),t.enableCursorGlow&&document.addEventListener("mousemove",h),document.addEventListener("click",m)}),e.onUnmounted(()=>{window.removeEventListener("scroll",b),document.removeEventListener("mousemove",h),document.removeEventListener("click",m)});const c=t.bgImage?(t.bgImage.startsWith("http")||t.bgImage.startsWith("data:"),t.bgImage):"";return()=>{var a;return e.createVNode("div",{class:"z-background"},[c&&e.createVNode("div",{class:"bg-image",style:{backgroundImage:`url(${c})`}},null),t.enableParallax&&c&&e.createVNode("div",{class:"parallax-bg",ref:p,style:{backgroundImage:`url(${c})`}},null),e.createVNode("div",{class:["effect-container",{"active-pulse":o.value.pulse,"active-scan":o.value.scan,"active-particles":o.value.particles,"active-grid":o.value.grid,"active-ripple":o.value.ripple,"active-glitch":o.value.glitch}],ref:z},[e.createVNode("div",{class:"pulse-overlay"},null),e.createVNode("div",{class:"scan-line"},null),e.createVNode("div",{class:"particles",ref:u},null),e.createVNode("div",{class:"grid-overlay"},null),e.createVNode("div",{class:"ripple-container"},[e.createVNode("div",{class:"ripple"},null),e.createVNode("div",{class:"ripple"},null),e.createVNode("div",{class:"ripple"},null)]),c&&e.createVNode("div",{class:"glitch-layer",style:{backgroundImage:`url(${c})`}},null)]),t.enableCursorGlow&&e.createVNode("div",{class:"cursor-glow",ref:s},null),e.createVNode("div",{class:"z-background-content"},[(a=d.default)==null?void 0:a.call(d)]),t.showControls&&e.createVNode("div",{class:"controls"},[e.createVNode("h3",null,[e.createTextVNode("效果控制")]),e.createVNode("button",{class:["control-btn",{active:o.value.pulse}],onClick:()=>l("pulse")},[e.createTextVNode("脉冲光晕")]),e.createVNode("button",{class:["control-btn",{active:o.value.scan}],onClick:()=>l("scan")},[e.createTextVNode("扫描线")]),e.createVNode("button",{class:["control-btn",{active:o.value.particles}],onClick:()=>l("particles")},[e.createTextVNode("粒子系统")]),e.createVNode("button",{class:["control-btn",{active:o.value.grid}],onClick:()=>l("grid")},[e.createTextVNode("透视网格")]),e.createVNode("button",{class:["control-btn",{active:o.value.ripple}],onClick:()=>l("ripple")},[e.createTextVNode("光波扩散")]),e.createVNode("button",{class:["control-btn",{active:o.value.glitch}],onClick:()=>l("glitch")},[e.createTextVNode("故障艺术")])])])}}}),v={install(t){t.component("ZBackground",f)}};r.ZBackground=f,r.default=v,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/package.json
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "zzy-background-animation",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Vue3 background animation component with particle effects, parallax scrolling, and more",
|
|
5
|
+
"main": "dist/zzy-background-animation.umd.js",
|
|
6
|
+
"module": "dist/zzy-background-animation.es.js",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"import": "./dist/zzy-background-animation.es.js",
|
|
12
|
+
"require": "./dist/zzy-background-animation.umd.js"
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
"files": [
|
|
16
|
+
"dist",
|
|
17
|
+
"README.md"
|
|
18
|
+
],
|
|
19
|
+
"scripts": {
|
|
20
|
+
"build": "vite build",
|
|
21
|
+
"prepublishOnly": "npm run build",
|
|
22
|
+
"example": "npm run build && cd example && npm install zzy-background-animation@file:.. && npm run dev"
|
|
23
|
+
},
|
|
24
|
+
"keywords": [
|
|
25
|
+
"vue3",
|
|
26
|
+
"background",
|
|
27
|
+
"animation",
|
|
28
|
+
"particle",
|
|
29
|
+
"parallax",
|
|
30
|
+
"tsx",
|
|
31
|
+
"component"
|
|
32
|
+
],
|
|
33
|
+
"author": "",
|
|
34
|
+
"license": "MIT",
|
|
35
|
+
"peerDependencies": {
|
|
36
|
+
"vue": "^3.0.0"
|
|
37
|
+
},
|
|
38
|
+
"devDependencies": {
|
|
39
|
+
"@types/node": "^25.5.0",
|
|
40
|
+
"@vitejs/plugin-vue-jsx": "^3.1.0",
|
|
41
|
+
"sass": "^1.69.0",
|
|
42
|
+
"typescript": "^5.0.0",
|
|
43
|
+
"vite": "^5.0.0",
|
|
44
|
+
"vite-plugin-dts": "^3.8.0",
|
|
45
|
+
"vue": "^3.4.0"
|
|
46
|
+
}
|
|
47
|
+
}
|