feat: init
This commit is contained in:
aoshisen
commit
656de5b2b3
36
.gitignore
vendored
Normal file
36
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
.DS_Store
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
coverage
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
||||||
|
*.tsbuildinfo
|
||||||
|
|
||||||
|
.eslintcache
|
||||||
|
|
||||||
|
# Cypress
|
||||||
|
/cypress/videos/
|
||||||
|
/cypress/screenshots/
|
||||||
|
|
||||||
|
# Vitest
|
||||||
|
__screenshots__/
|
||||||
52
README.md
Normal file
52
README.md
Normal file
|
|
@ -0,0 +1,52 @@
|
||||||
|
# Hover Tilt Card Design Website
|
||||||
|
|
||||||
|
这是一个基于 Vue.js 和 vanilla-tilt.js 构建的卡片设计网站，展示了多种具有 3D 悬停倾斜效果的卡片组件。
|
||||||
|
|
||||||
|
## 功能特点
|
||||||
|
|
||||||
|
- **3D 倾斜效果**：使用 vanilla-tilt.js 实现流畅的 3D 倾斜效果
|
||||||
|
- **多种卡片类型**：
|
||||||
|
- 基础倾斜卡片 (TiltCard)
|
||||||
|
- 产品卡片 (ProductCard)
|
||||||
|
- 个人资料卡片 (ProfileCard)
|
||||||
|
- **响应式设计**：适配各种屏幕尺寸
|
||||||
|
- **动态光影效果**：根据鼠标位置产生逼真的光影变化
|
||||||
|
|
||||||
|
## 技术栈
|
||||||
|
|
||||||
|
- Vue 3
|
||||||
|
- vanilla-tilt.js
|
||||||
|
- Vite
|
||||||
|
- CSS Grid & Flexbox
|
||||||
|
|
||||||
|
## 组件说明
|
||||||
|
|
||||||
|
### TiltCard
|
||||||
|
基础倾斜卡片组件，适用于展示一般信息内容，包含标题、描述和图标插槽。
|
||||||
|
|
||||||
|
### ProductCard
|
||||||
|
产品展示卡片，专为电商产品设计，包含产品图片、价格和操作按钮。
|
||||||
|
|
||||||
|
### ProfileCard
|
||||||
|
个人资料卡片，适合展示用户信息，包含头像、姓名、职位和个人简介。
|
||||||
|
|
||||||
|
## 使用方法
|
||||||
|
|
||||||
|
1. 克隆项目
|
||||||
|
2. 安装依赖：`npm install`
|
||||||
|
3. 启动开发服务器：`npm run dev`
|
||||||
|
4. 访问 `http://localhost:5174`
|
||||||
|
|
||||||
|
## 自定义选项
|
||||||
|
|
||||||
|
所有卡片组件都支持自定义 vanilla-tilt 选项，包括：
|
||||||
|
|
||||||
|
- `max`: 最大倾斜角度
|
||||||
|
- `speed`: 动画速度
|
||||||
|
- `glare`: 是否启用眩光效果
|
||||||
|
- `scale`: 倾斜时的缩放比例
|
||||||
|
- `perspective`: 透视距离
|
||||||
|
|
||||||
|
## 设计理念
|
||||||
|
|
||||||
|
该项目旨在展示现代网页设计中的交互体验，通过微妙的 3D 倾斜效果增强用户参与感，同时保持界面简洁美观。
|
||||||
15
index.html
Normal file
15
index.html
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link rel="icon" href="/favicon.ico">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Vite App</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
<script type="module" src="node_modules/hover-tilt/dist/hover-tilt.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
2874
package-lock.json
generated
Normal file
2874
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
32
package.json
Normal file
32
package.json
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
{
|
||||||
|
"name": "card",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"engines": {
|
||||||
|
"node": "^20.19.0 || >=22.12.0"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@tweakpane/plugin-essentials": "^0.2.1",
|
||||||
|
"hover-tilt": "^1.0.0",
|
||||||
|
"lodash-es": "^4.17.23",
|
||||||
|
"pinia": "^3.0.4",
|
||||||
|
"pinia-plugin-persistedstate": "^4.7.1",
|
||||||
|
"scss": "^0.2.4",
|
||||||
|
"tweakpane": "^4.0.5",
|
||||||
|
"vanilla-tilt": "^1.8.1",
|
||||||
|
"vue": "^3.5.26",
|
||||||
|
"vue-router": "^4.6.4"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^6.0.3",
|
||||||
|
"sass-embedded": "^1.97.3",
|
||||||
|
"vite": "^7.3.0",
|
||||||
|
"vite-plugin-vue-devtools": "^8.0.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
37
src/App.vue
Normal file
37
src/App.vue
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import CardRoot from '@/components/Card.vue';
|
||||||
|
import Editor from './components/Editor.vue';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<main class="app-container">
|
||||||
|
<section class="preview-zone">
|
||||||
|
<CardRoot />
|
||||||
|
</section>
|
||||||
|
<section class="editor-zone">
|
||||||
|
<Editor />
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.app-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
|
||||||
|
.preview-zone {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
perspective: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor-zone {
|
||||||
|
width: 350px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
1
src/assets/logo.svg
Normal file
1
src/assets/logo.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||||
|
After Width: | Height: | Size: 276 B |
17
src/assets/main.css
Normal file
17
src/assets/main.css
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
/* 全局基础样式清空 */
|
||||||
|
body,
|
||||||
|
html {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background-color: #0f0f0f;
|
||||||
|
color: white;
|
||||||
|
font-family: 'Inter', system-ui, sans-serif;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
width: 100vw;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
13
src/components/Card.vue
Normal file
13
src/components/Card.vue
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
img {
|
||||||
|
width: 400px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<template>
|
||||||
|
<hover-tilt :width="200">
|
||||||
|
<img src="https://images.pokemontcg.io/swsh4/25_hires.png" />
|
||||||
|
</hover-tilt>
|
||||||
|
</template>
|
||||||
74
src/components/Editor.vue
Normal file
74
src/components/Editor.vue
Normal file
|
|
@ -0,0 +1,74 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { folders } from "@/const/editor"
|
||||||
|
import { onMounted, ref, reactive } from 'vue'
|
||||||
|
import * as Tweakpane from 'tweakpane'
|
||||||
|
|
||||||
|
const Pane = Tweakpane.Pane
|
||||||
|
|
||||||
|
const paneContainer = ref<HTMLDivElement | null>(null)
|
||||||
|
let pane: any = null
|
||||||
|
|
||||||
|
// 创建响应式数据对象来存储表单值
|
||||||
|
const formData = reactive<Record<string, any>>({})
|
||||||
|
|
||||||
|
// 初始化表单数据
|
||||||
|
function initializeFormData() {
|
||||||
|
folders.flatMap(f => f.type === 'folder' ? f.children : []).forEach((item: any) => {
|
||||||
|
formData[item.label] = item.value
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建 tweakpane 面板
|
||||||
|
function createPane() {
|
||||||
|
if (!paneContainer.value) return
|
||||||
|
|
||||||
|
// 清理旧的 pane
|
||||||
|
if (pane) {
|
||||||
|
pane.dispose()
|
||||||
|
}
|
||||||
|
|
||||||
|
pane = new Pane({
|
||||||
|
container: paneContainer.value
|
||||||
|
})
|
||||||
|
|
||||||
|
// 遍历 folders 并创建对应的控制项
|
||||||
|
folders.forEach(folder => {
|
||||||
|
if (folder.type === 'folder' && folder.children) {
|
||||||
|
const f = pane.addFolder({
|
||||||
|
title: folder.label,
|
||||||
|
expanded: true
|
||||||
|
})
|
||||||
|
|
||||||
|
folder.children.forEach((item: any) => {
|
||||||
|
f.addBinding(formData, item.label, item.params)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
initializeFormData()
|
||||||
|
createPane()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="editor">
|
||||||
|
<div ref="paneContainer" class="pane-container"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.editor {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.pane-container {
|
||||||
|
width: 100%;
|
||||||
|
padding: 20px;
|
||||||
|
background: transparent;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
45
src/const/editor.ts
Normal file
45
src/const/editor.ts
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
const editorConfig = [
|
||||||
|
{
|
||||||
|
value: 'Hello World',
|
||||||
|
label: "Text",
|
||||||
|
params: {}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Range",
|
||||||
|
value: 50,
|
||||||
|
|
||||||
|
params: {
|
||||||
|
min: 0,
|
||||||
|
max: 100
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Step",
|
||||||
|
value: 50,
|
||||||
|
params: {
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
step: 10
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "quality",
|
||||||
|
value: 0,
|
||||||
|
params: {
|
||||||
|
options: { "medium": 0, "high": 1, "ultra": 2 }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
].map((i, index) => ({ ...i, id: index }));
|
||||||
|
|
||||||
|
const BasicFolder = editorConfig.filter((i, j) => j <= 2)
|
||||||
|
const OtherFolder = editorConfig.filter((i, j) => j > 2)
|
||||||
|
|
||||||
|
export const folders = [{
|
||||||
|
type: 'folder',
|
||||||
|
label: 'Basic',
|
||||||
|
children: BasicFolder
|
||||||
|
}, {
|
||||||
|
type: 'folder',
|
||||||
|
label: 'Other',
|
||||||
|
children: OtherFolder
|
||||||
|
}]
|
||||||
14
src/main.js
Normal file
14
src/main.js
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
import './assets/main.css'
|
||||||
|
|
||||||
|
import { createApp } from 'vue'
|
||||||
|
import { createPinia } from 'pinia'
|
||||||
|
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
app.use(router)
|
||||||
|
|
||||||
|
const pinia = createPinia();
|
||||||
|
app.use(pinia)
|
||||||
|
app.mount('#app')
|
||||||
12
src/router/index.js
Normal file
12
src/router/index.js
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
|
||||||
|
]
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(),
|
||||||
|
routes
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
137
test.html
Normal file
137
test.html
Normal file
|
|
@ -0,0 +1,137 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>CSS Holographic Card Demo</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--color1: #00e7ff;
|
||||||
|
--color2: #ff00e7;
|
||||||
|
--back: #1a1a1a;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--back);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片容器：设置透视距离 */
|
||||||
|
.card-container {
|
||||||
|
perspective: 1000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片主体 */
|
||||||
|
.card {
|
||||||
|
width: 320px;
|
||||||
|
height: 450px;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 15px;
|
||||||
|
background-image: url('https://images.pokemontcg.io/swsh4/25_hires.png'); /* 示例卡面 */
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
box-shadow: 0 0 20px rgba(0,0,0,0.5);
|
||||||
|
|
||||||
|
/* 关键：通过 JS 更新变量 */
|
||||||
|
transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
|
||||||
|
transition: transform 0.1s ease-out;
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 全息层：彩虹光泽 */
|
||||||
|
.card::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 2;
|
||||||
|
|
||||||
|
/* 核心：利用渐变和混合模式 */
|
||||||
|
background: linear-gradient(
|
||||||
|
115deg,
|
||||||
|
transparent 20%,
|
||||||
|
var(--color1) 36%,
|
||||||
|
var(--color2) 43%,
|
||||||
|
var(--color1) 50%,
|
||||||
|
var(--color2) 57%,
|
||||||
|
var(--color1) 64%,
|
||||||
|
transparent 80%
|
||||||
|
);
|
||||||
|
background-size: 300% 300%;
|
||||||
|
background-position: var(--pos-x, 50%) var(--pos-y, 50%);
|
||||||
|
|
||||||
|
/* 混合模式：这是全息感的来源 */
|
||||||
|
mix-blend-mode: color-dodge;
|
||||||
|
opacity: var(--opacity, 0);
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 光斑层：模拟点光源直射 */
|
||||||
|
.card::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 3;
|
||||||
|
background: radial-gradient(
|
||||||
|
circle at var(--pos-x, 50%) var(--pos-y, 50%),
|
||||||
|
rgba(255, 255, 255, 0.6) 0%,
|
||||||
|
transparent 60%
|
||||||
|
);
|
||||||
|
mix-blend-mode: overlay;
|
||||||
|
opacity: var(--opacity, 0);
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="card-container">
|
||||||
|
<div class="card" id="card"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const card = document.getElementById('card');
|
||||||
|
|
||||||
|
card.addEventListener('mousemove', (e) => {
|
||||||
|
const rect = card.getBoundingClientRect();
|
||||||
|
|
||||||
|
// 计算鼠标在卡片上的相对坐标 (0 to 1)
|
||||||
|
const x = (e.clientX - rect.left) / rect.width;
|
||||||
|
const y = (e.clientY - rect.top) / rect.height;
|
||||||
|
|
||||||
|
// 计算旋转角度 (最大旋转 20 度)
|
||||||
|
const rx = (y - 0.5) * -40; // 垂直旋转
|
||||||
|
const ry = (x - 0.5) * 40; // 水平旋转
|
||||||
|
|
||||||
|
// 计算渐变背景的位置 (根据鼠标反向移动增加灵动感)
|
||||||
|
const posX = 100 - x * 100;
|
||||||
|
const posY = 100 - y * 100;
|
||||||
|
|
||||||
|
// 更新 CSS 变量
|
||||||
|
card.style.setProperty('--rx', `${rx}deg`);
|
||||||
|
card.style.setProperty('--ry', `${ry}deg`);
|
||||||
|
card.style.setProperty('--pos-x', `${posX}%`);
|
||||||
|
card.style.setProperty('--pos-y', `${posY}%`);
|
||||||
|
card.style.setProperty('--opacity', `1`);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 鼠标移出重置
|
||||||
|
card.addEventListener('mouseleave', () => {
|
||||||
|
card.style.setProperty('--rx', `0deg`);
|
||||||
|
card.style.setProperty('--ry', `0deg`);
|
||||||
|
card.style.setProperty('--opacity', `0`);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
29
vite.config.js
Normal file
29
vite.config.js
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
import { fileURLToPath, URL } from 'node:url'
|
||||||
|
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import vueDevTools from 'vite-plugin-vue-devtools'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
vue({
|
||||||
|
template: {
|
||||||
|
compilerOptions: {
|
||||||
|
// 告诉 Vue 编译器，所有以 'hover-' 开头的标签都是自定义元素
|
||||||
|
isCustomElement: (tag) => tag.startsWith('hover-')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
vueDevTools(),
|
||||||
|
],
|
||||||
|
server: {
|
||||||
|
host: '0.0.0.0',
|
||||||
|
port: 3000
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue
Block a user