# css教程与案例

**Repository Path**: bolepan/css-tutorial-and-case

## Basic Information

- **Project Name**: css教程与案例
- **Description**: css教程与案例
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-09-09
- **Last Updated**: 2024-09-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# css 常用代码

#### 介绍

css 常用代码，基本功训练案例

#### 常用学习资料

1. hd-后盾人 https://doc.houdunren.com/%E7%B3%BB%E7%BB%9F%E8%AF%BE%E7%A8%8B/css/1%20%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86.html
   https://www.houdunren.com/system/9
2. items-效果

- https://www.youtube.com/@OnlineTutorialsYT

3. uncover-css 揭秘

#### 常用案例

#### 常用工具

1. 文字动画
   https://animate.style/
   https://cssanimation.io/index.html
2. 图标动画
   https://www.minimamente.com/project/magic/
3. 悬停效果 hover
   https://ianlunn.github.io/Hover/
4. loading
   https://nzbin.github.io/three-dots/#
   https://css-loaders.com/
5. 震动效果
   https://elrumordelaluz.github.io/csshake/#
6. 集合
   https://uiverse.io/
   https://navnav.co/

7. 图标 icon
   https://www.iconshock.com/svg-icons/
8. 背景
   https://bansal.io/pattern-css
   https://www.magicpattern.design/tools/css-backgrounds
   波浪https://www.shapedivider.app/
   https://svgwave.in/
   各种形状https://bennettfeely.com/clippy/
   https://css-generators.com/
9. 布局
   https://grid.layoutit.com/
10. 按钮
    https://tympanus.net/Development/MagneticButtons/
    软件架构说明
11. 视差效果
    https://matthew.wagerfield.com/parallax/
    https://dixonandmoe.com/rellax/
12. 上下滑动
    https://webslides.tv/#slide=1

13. 生成器
    https://angrytools.com/css/animation/
    动画https://animista.net/
    https://html-css-js.com/css/generator/box-shadow/
    https://loading.io/flexbox