aoshisen/card
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: init

Browse Source
This commit is contained in:
aoshisen 2026-01-29 18:31:20 +08:00
commit 656de5b2b3
17 changed files with 4997 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
.gitignore vendored Normal file
View 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
View 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
View 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
View File

File diff suppressed because it is too large Load Diff

32
package.json Normal file
View 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

37
src/App.vue Normal file
View 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
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 276 B

17
src/assets/main.css Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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))
},
},
})

1609
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff