# Html_Css_Learning_example

**Repository Path**: lifekokool/html_-css_-learning_example

## Basic Information

- **Project Name**: Html_Css_Learning_example
- **Description**: 本人根据网上一些网站的效果或者别人写的案例自己跟着模仿或者写的一些前端html+css的小案例
- **Primary Language**: CSS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-09-12
- **Last Updated**: 2022-09-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Html_Css_Learning_example

#### 介绍
本人根据部分网站效果写的一些前端html+css的小案例

#### 导航系列
旋转展开、指定展开等
![输入图片说明](https://foruda.gitee.com/images/1662979795874150445/82c9d994_9185049.png "屏幕截图")
![输入图片说明](https://foruda.gitee.com/images/1662979826320141574/f2dfd989_9185049.png "屏幕截图")

#### css拟态图标制作案例
![输入图片说明](https://foruda.gitee.com/images/1662979887741995041/2c664f25_9185049.png "屏幕截图")

#### label绑定实现闹钟UI效果案例
![输入图片说明](https://foruda.gitee.com/images/1662979918222545371/9829300c_9185049.png "屏幕截图")

#### 点击灯泡按钮效果案例
背景转移和图片转移两种实现方式
![输入图片说明](https://foruda.gitee.com/images/1662979956624332126/309f7563_9185049.png "屏幕截图")

#### 浮动+内外边距招聘介绍案例
![输入图片说明](https://foruda.gitee.com/images/1662980024782644529/2d3c5f49_9185049.png "屏幕截图")

#### 旅游介绍列表案例
![输入图片说明](https://foruda.gitee.com/images/1662980050333898050/88ef8bb3_9185049.png "屏幕截图")

#### 密码登录案例
![输入图片说明](https://foruda.gitee.com/images/1662980128950492403/758ff578_9185049.png "屏幕截图")

#### 密码登录案例2
![输入图片说明](https://foruda.gitee.com/images/1662980165968556889/8b0f70f3_9185049.png "屏幕截图")

#### 使用transform实现西游四徒动画
![输入图片说明](https://foruda.gitee.com/images/1662980202520546238/d89c2805_9185049.png "屏幕截图")

#### 伪类元素实现导航栏
![输入图片说明](https://foruda.gitee.com/images/1662980231376307226/ec11d7e2_9185049.png "屏幕截图")

#### 温度计UI设计
![输入图片说明](https://foruda.gitee.com/images/1662980260122380710/bf7b6e0b_9185049.png "屏幕截图")

#### 无限旋转music碟片案例
![输入图片说明](https://foruda.gitee.com/images/1662980332540926514/36346edd_9185049.png "屏幕截图")

#### 小米手机演示效果案例
![输入图片说明](https://foruda.gitee.com/images/1662980359632431604/27a3e3ae_9185049.png "屏幕截图")

#### 旋转案例
![输入图片说明](https://foruda.gitee.com/images/1662980396911690583/4b1c6f7e_9185049.png "屏幕截图")

#### 云服务器推荐产品列表UI
![输入图片说明](https://foruda.gitee.com/images/1662980423588488967/7dc62360_9185049.png "屏幕截图")

#### 左下角展开菜单案例
![输入图片说明](https://foruda.gitee.com/images/1662980458901724902/4d0a08f0_9185049.png "屏幕截图")