前端能用到的网站

88 阅读1分钟

1. 图片处理Image Cropper

给图片显示一个裁剪框,裁剪框允许用户调整大小和位置,常用来做用户自定义头像的裁剪功能。 Image Cropper

image.png

使用说明

Image Cropper是因为一个裁剪头像并上传的需求诞生的。

一个裁剪头像的流程大概是这样:

  • 用户选择一张本地图片。
  • 用户使用鼠标拖拽裁剪头像,并实时预览不同大小的裁剪效果。
  • 把用户的裁剪范围和图片提交到服务器端。

从提交到服务器端的角度来看,我们关注的点只有两个:

  • 用户选择的本地图片
  • 用户的裁剪结果(Rect: 相对于图片的left、top、width、height)

2. 颜色部分

1. 渐变色效果 Web Gradients

Web Gradients

image.png

可以获取当前配色的图片或者copy css

2. 网站调色板 pixelfika

pixelfika

image.png

image.png

3. 配色查找 colors

colors

image.png

4. Adobe Color

Adobe Color

image.png

5.websafecolors

websafecolors

image.png

3. 页面效果部分

1. 阴影效果 neumorphism

neumorphism

image.png

2. 在线调试阴影 lingdaima

lingdaima

image.png

3 波浪动画效果 Get Waves

Get Waves

image.png

image.png

4. 毛玻璃模糊效果 Hype4 Academy

Hype4 Academy image.png

5. 毛玻璃效果生成

generator

image.png

4. 页面部分

1.collectui

collectui

image.png

2. pagecollective

pagecollective

image.png

image.png

3. refero

refero

image.png

5. 图表部分

1.ppchart

echarts图表案例

ppchart

image.png

2.地图数据获取

阿里云数据可视化平台 DataV.GeoAtlas地理小工具系列

area_selector

3.js特效

js特效