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