# bilibili-html-demo

**Repository Path**: chriscentos/bilibili-html-demo

## Basic Information

- **Project Name**: bilibili-html-demo
- **Description**: No description available
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-01-13
- **Last Updated**: 2022-01-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# B 站 HTML 学习 demo

## 首页

https://yyeexin.github.io/bilibili-html-demo/

## 可能需要使用的资源 CDN

```
<!-- font-awesome -->
<link href="https://cdn.bootcss.com/font-awesome/5.8.0/css/all.css" rel="stylesheet" />
```

## 目录

| 效果名               | 预览                                                                                                      | 源码                                                                                                                   |
| -------------------- | --------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| 登录页               | [Login.html](https://yyeexin.github.io/bilibili-html-demo/src/Login.html)                                 | [Login.html](https://github.com/yyeexin/bilibili-html-demo/blob/master/src/Login.html)                                 |
| Loading 效果         | [Loading1.html](https://yyeexin.github.io/bilibili-html-demo/src/Loading1.html)                           | [Loading1.html](https://github.com/yyeexin/bilibili-html-demo/blob/master/src/Loading1.html)                           |
| 图片 3D 分层悬浮效果 | [LayeredImage.html](https://yyeexin.github.io/bilibili-html-demo/src/LayeredImage.html)                   | [LayeredImage.html](https://github.com/yyeexin/bilibili-html-demo/blob/master/src/LayeredImage.html)                   |
| 搜索框               | [SearchBox.html](https://yyeexin.github.io/bilibili-html-demo/src/SearchBox.html)                         | [SearchBox.html](https://github.com/yyeexin/bilibili-html-demo/blob/master/src/SearchBox.html)                         |
| 社交媒体按钮         | [SocialMediaButtons.html](https://yyeexin.github.io/bilibili-html-demo/src/SocialMediaButtons.html)       | [SocialMediaButtons.html](https://github.com/yyeexin/bilibili-html-demo/blob/master/src/SocialMediaButtons.html)       |
| 悬浮照片效果         | [FloatPhoto.html](https://yyeexin.github.io/bilibili-html-demo/src/FloatPhoto.html)                       | [FloatPhoto.html](https://github.com/yyeexin/bilibili-html-demo/blob/master/src/FloatPhoto.html)                       |
| 自适应布局导航       | [FlexLayout.html](https://yyeexin.github.io/bilibili-html-demo/src/FlexLayout.html)                       | [FlexLayout.html](https://github.com/yyeexin/bilibili-html-demo/blob/master/src/FlexLayout.html)                       |
| 自适应相册           | [FlexAlbum.html](https://yyeexin.github.io/bilibili-html-demo/src/FlexAlbum.html)                         | [FlexAlbum.html](https://github.com/yyeexin/bilibili-html-demo/blob/master/src/FlexAlbum.html)                         |
| 自适应 UI 设计       | [FlexCard.html](https://yyeexin.github.io/bilibili-html-demo/src/FlexCard.html)                           | [FlexCard.html](https://github.com/yyeexin/bilibili-html-demo/blob/master/src/FlexCard.html)                           |
| 荧光边框             | [GradientBorderEffects.html](https://yyeexin.github.io/bilibili-html-demo/src/GradientBorderEffects.html) | [GradientBorderEffects.html](https://github.com/yyeexin/bilibili-html-demo/blob/master/src/GradientBorderEffects.html) |
| 登录页 1             | [Login1.html](https://yyeexin.github.io/bilibili-html-demo/src/Login1.html)                               | [Login1.html](https://github.com/yyeexin/bilibili-html-demo/blob/master/src/Login1.html)                               |
| 自适应滑动评论列表   | [Testimonia.html](https://yyeexin.github.io/bilibili-html-demo/src/Testimonia.html)                       | [Testimonia.html](https://github.com/yyeexin/bilibili-html-demo/blob/master/src/Testimonia.html)                       |
| 登录页 2             | [Login2.html](https://yyeexin.github.io/bilibili-html-demo/src/Login2.html)                               | [Login2.html](https://github.com/yyeexin/bilibili-html-demo/blob/master/src/Login2.html)                               |
| 4 种图标 hover 效果  | [IconHover.html](https://yyeexin.github.io/bilibili-html-demo/src/IconHover.html)                         | [IconHover.html](https://github.com/yyeexin/bilibili-html-demo/blob/master/src/IconHover.html)                         |
| Menu Hover           | [MenuHover.html](https://yyeexin.github.io/bilibili-html-demo/src/MenuHover.html)                         | [MenuHover.html](https://github.com/yyeexin/bilibili-html-demo/blob/master/src/MenuHover.html)                         |
| Persion Website      | [PersionWebsite.html](https://yyeexin.github.io/bilibili-html-demo/src/PersionWebsite.html)               | [PersionWebsite.html](https://github.com/yyeexin/bilibili-html-demo/blob/master/src/PersionWebsite.html)               |
| Reverse Card         | [ReverseCard.html](https://yyeexin.github.io/bilibili-html-demo/src/ReverseCard.html)                     | [ReverseCard.html](https://github.com/yyeexin/bilibili-html-demo/blob/master/src/ReverseCard.html)                     |
| FoldMenu             | [FoldMenu.html](https://yyeexin.github.io/bilibili-html-demo/src/FoldMenu.html)                           | [FoldMenu.html](https://github.com/yyeexin/bilibili-html-demo/blob/master/src/FoldMenu.html)                           |
| Text                 | [Text.html](https://yyeexin.github.io/bilibili-html-demo/src/Text.html)                                   | [Text.html](https://github.com/yyeexin/bilibili-html-demo/blob/master/src/Text.html)                                   |
| 动态晴阴雨雪         | [Weather.html](https://yyeexin.github.io/bilibili-html-demo/src/Weather.html)                             | [Weather.html](https://github.com/yyeexin/bilibili-html-demo/blob/master/src/Weather.html)                             |