# boxster-css

**Repository Path**: xuzht/boxster-css

## Basic Information

- **Project Name**: boxster-css
- **Description**: # Vue 3 + TypeScript + Vite
CSS基础性练习
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-02-12
- **Last Updated**: 2023-03-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 + TypeScript + Vite + TailwindCSS + NaiveUI

> 依赖组件及安装方式

- NaiveUI 依赖图标库 `https://www.xicons.org`

  ```shell
  # For vue3
  npm i -D @vicons/fluent
  npm i -D @vicons/ionicons4
  npm i -D @vicons/ionicons5
  npm i -D @vicons/antd
  npm i -D @vicons/material
  npm i -D @vicons/fa # font awesome
  npm i -D @vicons/tabler
  npm i -D @vicons/carbon
  ```

# CSS 基础性练习

- Demo001
  制作页面翻牌效果

  ```markdown
  # 要点

  1. 使用 position: absolute 将两个 div (正面与背面) 重叠
  2. 使用 transform: rotateY() 旋转 div
  3. 使用 backface-visibility 隐藏背面
  4. 使用 perspective 设定立体的透视深度
  ```

- Demo002
  左右滑动效果

  ```markdown
  # 要点

  1. 左右滑轨的控制
  2. 滑动距离间距的计算
  ```

- Demo003
  倒计时效果

  ```markdown
  # 要点

  1. circle 元素的使用
  2. transform 旋转-90deg 的使用
  3. 定时器使用
  ```

- Demo004
  聚光灯效果

  ```markdown
  # 要点

  1. 元素的定位
  2. 伪元素 after 的使用
  3. 聚光灯效果的视线
  4. 帧动画的定义
  ```