[TOC]

# css整体效果

# 1. 可调节水球进度显示

效果图片：

代码：浏览器控制台查看iframe源代码

效果：

# 2. 上下切换菜单

效果图片：

代码：浏览器控制台查看iframe源代码

效果：

# 3. 排名 — 渐变进度条（按排名递减）

效果图片：

代码：浏览器控制台查看iframe源代码

效果：

# 4. 排名 — 列表形式

效果图片：

代码：浏览器控制台查看iframe源代码

效果：