https://github.com/shoppingzh/ui

一些UI设计
https://github.com/shoppingzh/ui

apple-watch css iphone ui webdesign

Last synced: about 4 hours ago
JSON representation

一些UI设计

• Host: GitHub
• URL: https://github.com/shoppingzh/ui
• Owner: shoppingzh
• Created: 2019-03-21T12:31:35.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-06-23T03:18:20.000Z (over 2 years ago)
• Last Synced: 2023-03-04T07:24:27.195Z (over 1 year ago)
• Topics: apple-watch, css, iphone, ui, webdesign
• Language: JavaScript
• Homepage:
• Size: 23.6 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 22
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

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)