FEBaseCases

一个前端基础小案例的分享地
主要内容为HTML、CSS、JS基础。旨在巩固基础、分享技巧。
内容实现多样化，所列方法仅供参考。

目录结构

└── public/
    ├── thumb/                // 缩略图
    ├── ...
└── src/
    └── CSAES/                // 案例目录
        ├── Background/         // 背景特效
        ├── Button/             // 按钮动效
        ├── Cursor/             // 鼠标交互
        ├── FormInput/          // 表单输入
        ├── Loading/            // 加载动画
        ├── Text/               // 文本效果
        ├── ...
    └── DRAWING/              // CSS绘图
        ├── CSSDrawing/         // 多标签 
        ├── SingleDiv/          // 单标签
        ├── ...
    └── FRAGMENTS/             // CSS知识片段     
        ├── ...
    └── PAGES/                // 一些页面成品案例
        ├── ...
    └── ...
└── ...

CSS知识碎片 📋FRAGMENTS

将CSS中一些容易被忽视的知识点或者技巧，单独抽离出来，方便单点学习与复习，加强知识记忆。

单标签绘图 🌵SingleDiv

使用一个div标签，利用CSS的背景样式与阴影进行绘制图案，呈现出不可思议的效果。旨在熟练掌握与运用 css 背景的叠加与多重阴影的组合技。

CSS绘图 🪅CSSDrawing

利用CSS的各种属性组合进行绘制图案，展现CSS的艺术性。旨在提供CSS绘图的灵感，加强对CSS的技巧使用。

网页特效 🍁

利用 CSS + JS，实现一些绚丽的网页背景或文本效果，提升网页的视效。

• 🧱 网页背景 --> Background
• 🥕 按钮动效 --> Button
• 💞 鼠标交互 --> Cursor
• 🍂 加载动画 --> Loading
• 🖌️ 文本效果 --> Text
• 🧮 表单输入 --> FormInput

B 站地址

BILIBILI 👉 ⏳ 传送门