# ui

**Repository Path**: shoppingzh/ui

## Basic Information

- **Project Name**: ui
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-04-25
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ui

> 一些UI设计。经常看到生活中一些好玩的东西， 有的是突发奇想的设计，有的是看到一些好的设计后，不禁感叹：作者是如何做出这么好的设计来的呢？于是，有了下面的内容。
> 以下的内容基本上都是通过纯CSS的方式实现的，有少量的js，也很少依赖高级js库，代码简单易懂。



**看不到图片请移步[https://gitee.com/shoppingzh/ui](https://gitee.com/shoppingzh/ui)**



## Apple watch系列

#### 1. apple watch 表盘
![apple watch dial 1](images/apple-watch-dial-1.png)![apple watch dial 2](images/apple-watch-dial-2.gif)![apple watch dial 3](images/apple-watch-dial-3.png)![apple watch dial 4](images/apple-watch-dial-4.png)![apple watch dial 5](images/apple-watch-dial-5.gif?v=3)![apple watch dial 6](images/apple-watch-dial-6.gif)![apple watch dial 8](images/apple-watch-dial-8.gif)![apple watch dial 9](images/apple-watch-dial-9.gif)


#### 2. apple watch 应用
![apple watch desk](images/apple-watch-desk.png)![apple watch todo](images/apple-watch-todo.gif)![apple watch breath](images/apple-watch-breath2.gif)![apple watch recorder](images/apple-watch-recorder.gif)

## iPhone系列
#### 1. iOS 13音量指示器UI
![iphone volume indicator](images/volume-indicator.gif)

#### 2. 仿iPhone桌面搜索
![iphone-search](images/iphone-search.gif)

## 微信系列
#### 1. 微信彩签
![wechat tag](images/wechat-tag.gif)

#### 2. 网络错误
![error](images/3.jpg)

#### 3. webview底部操作栏
![wechat-webview](images/wechat-webview.gif)


## 阴影系列

#### 1. Android卡片阴影效果
![android card](images/android-card.png)

#### 2. 单标签实现彩虹圆环
![shadow 1](images/shadow.png)

## 占位系列
#### 1. youtube首页占位效果（动画）
![youtube skeleton](images/skeleton-youtube.gif)

#### 2. 通用首页占位
![placeholder](images/skeleton-home.png)

## 其它

#### 网页放大镜
![网页放大镜](images/magnifier.gif)

#### 登录二维码角效果
![ 登录二维码角效果](images/corner-qrcode.png)

#### 图片平均色计算器
![图片平均色计算器](images/image-avg-color.png)

#### 知乎导航栏切换效果
![知乎导航栏切换效果](images/zhihu-navbar.gif)

#### 京东商品详情
![京东商品详情](images/goods-preview.gif)

#### 横向滚动文字效果（css + 少量js）
![横向滚动文字效果](images/roll-text.gif)

#### 仿饿了么首页的宣传卡片效果
![饿了么宣传卡片效果](images/ele.me.gif)

#### 防抖-节流可视化UI
![debounce and throttle](images/debounce-throttle.gif)

#### 365 Dots
> 365 Dots是iOS的一个应用，用来展示当前一年走过的时间。

![336 Dots](images/5.jpg)

#### css八卦
![八卦](images/gossip.gif)

#### card flip
![card flip](images/1.gif)

#### 纯css实现tooltip
![tooltip](images/tooltip.gif)

#### css实现的加载动画
![loading](images/loading.gif)