Merge branch 'main' of https://github.com/rzx007/nav

rzx007 · Mar 9, 2024 · a80b492 · a80b492
2 parents ef0dfab + 1ca44f8
commit a80b492
Show file tree

Hide file tree

Showing 10 changed files with 204 additions and 6 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 maomao
+Copyright (c) 2023 rzx007
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/docs/.vitepress/configs/nav.ts b/docs/.vitepress/configs/nav.ts
@@ -19,7 +19,7 @@ export const nav: DefaultTheme.NavItem[] = [
         text: '软件推荐与配置',
         items: [
           { text: '多平台软件', link: '/efficiency/software/cross-platform' },
-          { text: 'Mac 平台', link: '/efficiency/software/mac' },
+          // { text: 'Mac 平台', link: '/efficiency/software/mac' },
           { text: 'Windows 平台', link: '/efficiency/software/windows' },
           { text: '浏览器设置与扩展', link: '/efficiency/software/browser' },
           { text: 'Visual Studio Code 配置', link: '/efficiency/software/vscode' },
@@ -39,7 +39,10 @@ export const nav: DefaultTheme.NavItem[] = [
     text: 'vue3-resource',
     link: 'https://hu-snail.github.io/vue3-resource/'
   },
-
+  {
+    text: '书籍',
+    link: ' https://youjia.sx.cn/you-dont-know-ts/'
+  },
   {
     text: '日常笔记',
     link: 'https://rzx007.github.io/docs/'

diff --git a/docs/.vitepress/configs/sidebar.ts b/docs/.vitepress/configs/sidebar.ts
@@ -44,6 +44,7 @@ export const sidebar: DefaultTheme.Config['sidebar'] = {
         { text: 'Canvas API 截取图片的一部分', link: '/html-dom/canvas-shotimg' },
         { text: '如何不使用`try-catch`处理异步错误', link: '/html-dom/await-to-js' },
         { text: '利用延迟实现复杂动画', link: '/html-dom/annimation-by-delay' },
+        { text: '3D卡片悬浮效果', link: '/html-dom/3D-hover-effect' },
       ]
     },
     {

diff --git a/docs/code/demo/3DCard.tsx b/docs/code/demo/3DCard.tsx
@@ -0,0 +1,63 @@
+// Card3d.tsx
+import { defineComponent, onMounted, ref, PropType, CSSProperties } from 'vue'
+const style: CSSProperties = {
+  width: '200px',
+  borderRadius: '10px',
+  background: '#fff',
+  transformStyle: 'preserve-3d',
+  transition: 'all 0.5s ease',
+  overflow: 'hidden',
+  transform: 'perspective(500px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))',
+}
+// 验证范围
+const validatorFn = (val: Array<number>) => {
+  return val.length === 2 && val[0] > -90 && val[1] < 90
+}
+export const Card3D = defineComponent({
+  name: 'Card3D',
+  props: {
+    yRange: {
+      type: Array as PropType<Array<number>>,
+      validator: validatorFn,
+      default: () => [-20, 20],
+    },
+    xRange: {
+      type: Array as PropType<Array<number>>,
+      validator: validatorFn,
+      default: () => [-15, 15],
+    },
+  },
+  setup(props, { slots }) {
+    const cardRef = ref<HTMLDivElement | null>(null)
+    onMounted(() => {
+      const card3d = cardRef.value!
+      const { yRange, xRange } = props
+      const effectHandle = (e: MouseEvent) => {
+        const { clientX, clientY } = e
+        const { left, top, width, height } = card3d.getBoundingClientRect()
+        // 相对卡片的实际移动距离
+        const x = clientX - left
+        const y = clientY - top
+        // 计算比例
+        const yPercent = y / height
+        const xPercent = x / width
+        // 等比运算计算角度
+        const yDeg = yRange[0] + (yRange[1] - yRange[0]) * yPercent
+        const xDeg = xRange[0] + (xRange[1] - xRange[0]) * xPercent
+        // 设置css变量
+        card3d.style.setProperty('--ry', `${xDeg}deg`)
+        card3d.style.setProperty('--rx', `${-yDeg}deg`)
+      }
+      card3d.addEventListener('mousemove', effectHandle)
+      card3d.addEventListener('mouseleave', () => {
+        card3d.style.setProperty('--ry', `0deg`)
+        card3d.style.setProperty('--rx', `0deg`)
+      })
+    })
+    return () => (
+      <div style={style} ref={cardRef}>
+        {slots.default && slots.default()}
+      </div>
+    )
+  },
+})
diff --git a/docs/code/demo/3DHover.vue b/docs/code/demo/3DHover.vue
@@ -0,0 +1,101 @@
+<!-- 3DHover.vue -->
+<template>
+  <div class="card-wrap">
+    <div class="card-3d">
+      <img src="https://fun.youth.cn/gnzx/202011/W020201119307688300465.jpg" alt="" />
+    </div>
+  </div>
+</template>
+<script setup lang="tsx">
+import { onMounted } from 'vue'
+onMounted(() => {
+  const card3d = document.querySelector('.card-3d') as HTMLDivElement
+  const yRange = [-20, 20]
+  const xRange = [-15, 15]
+
+  const effectHandle = (e) => {
+    const { clientX, clientY } = e
+    const { left, top, width, height } = card3d.getBoundingClientRect()
+    // 相对卡片的实际移动距离
+    const x = clientX - left
+    const y = clientY - top
+    // 计算比例
+    const yPercent = y / height
+    const xPercent = x / width
+    // 等比运算计算角度
+    const yDeg = yRange[0] + (yRange[1] - yRange[0]) * yPercent
+    const xDeg = xRange[0] + (xRange[1] - xRange[0]) * xPercent
+    // 设置css变量
+    card3d.style.setProperty('--ry', `${xDeg}deg`)
+    card3d.style.setProperty('--rx', `${-yDeg}deg`)
+    card3d.style.setProperty('--per', `${xDeg}%`)
+  }
+  card3d.addEventListener('mousemove', effectHandle)
+  card3d.addEventListener('mouseleave', () => {
+    card3d.style.setProperty('--ry', `0deg`)
+    card3d.style.setProperty('--rx', `0deg`)
+  })
+})
+</script>
+<style lang="scss">
+.card-wrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  background-color: transparent;
+  padding: 12px 0;
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+    background: url('https://fun.youth.cn/gnzx/202011/W020201119307688300465.jpg');
+    background-size: cover;
+    filter: blur(50px);
+    transform: scale(2);
+  }
+  .card-3d {
+    position: relative;
+    width: 200px;
+    border-radius: 10px;
+    background: #fff;
+    // 核心样式
+    transform-style: preserve-3d;
+    transition: all 0.5s ease;
+    transform: perspective(500px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
+    &:hover {
+      box-shadow: -3px 3px 10px rgba(0, 0, 0, 0.5);
+    }
+    &:hover::before {
+      display: block;
+    }
+    // 添加反光效果
+    &::before {
+      content: '';
+      display: none;
+      position: absolute;
+      border-radius: inherit;
+      inset: 0;
+      background: linear-gradient(
+        115deg,
+        transparent 0%,
+        rgba(255, 255, 255, 0.5) var(--per, 30%),
+        rgba(0, 0, 0, 0.5) calc(var(--per, 55%) + 25%),
+        rgba(255, 255, 255, 0.5) calc(var(--per, 80%) + 50%),
+        transparent 100%
+      );
+      mix-blend-mode: color-dodge;
+    }
+
+    img {
+      border-radius: inherit;
+      width: 100%;
+    }
+  }
+}
+</style>
diff --git a/docs/code/demo/AnimationByDelay.vue b/docs/code/demo/AnimationByDelay.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="an-container">
     <div class="ball" ref="ballRef"></div>
     <input type="range" min="0" max="1" step="0.01" v-model="range" @input="changeFn">
   </div>
@@ -17,7 +17,7 @@ onMounted(() => {
 })
 </script>
 <style>
-.container {
+.an-container {
   position: relative;
   width: 100px;
   height: 100px;

diff --git a/docs/code/demo/PasteImageFromClipboard.vue b/docs/code/demo/PasteImageFromClipboard.vue
@@ -23,6 +23,7 @@ onMounted(() => {
 })
 </script>
 <style lang="scss" scoped>
+
 .container {
   align-items: center;
   display: flex;
@@ -49,4 +50,14 @@ onMounted(() => {
     max-width: 42rem;
   }
 }
+.dark {
+  .container {
+    background-color: #2d3748;
+    border-color: #4a5568;
+    .key {
+      background-color: #2d3748;
+      border-color: #4a5568;
+    }
+  }
+}
 </style>
diff --git a/docs/html-dom/3D-hover-effect.md b/docs/html-dom/3D-hover-effect.md
@@ -0,0 +1,18 @@
+# 3D卡片悬浮效果
+
+<<< @/code/demo/3DHover.vue{vue}
+
+
+### 封装成组件
+::: details 点击查看代码
+<<< @/code/demo/3DCard.tsx{tsx}
+:::
+
+
+### 效果
+
+<script setup>
+import threedHover from '../code/demo/3DHover.vue'
+</script>
+
+<threedHover />
diff --git a/docs/html-dom/vue-slide-smooth.md b/docs/html-dom/vue-slide-smooth.md
@@ -5,6 +5,7 @@
 :::
 
 <<< @/code/demo/vSlideIn.vue{vue}
+
 ### 示例
 
 <script setup>

diff --git a/docs/navs/data.ts b/docs/navs/data.ts
@@ -267,7 +267,7 @@ export const NAV_DATA: NavData[] = [
         icon: 'https://registry.npmmirror.com/@lobehub/assets-logo/1.1.0/files/assets/logo-3d.webp',
         title: 'Lobe UI',
         desc: 'Lobe UI is an open-source UI component library for building AIGC web apps',
-        link: 'https://www.langui.dev/'
+        link: 'https://ui.lobehub.com/'
       },
     ]
   },
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,6 +5,7 @@ @@
     :::
     <<< @/code/demo/vSlideIn.vue{vue}
     ### 示例
     <script setup>
@@ Expand Down @@