咸安区

单标签使用css渐变实现

单标签使用渐变实现 当然,可以看到,我们上面使用的是两个标签的结构: div class=g-container div class=g-progress/div /div 抠门点,我们还可以仅仅利用一个标签去完成这个事情,主要借助了渐变去...

咸安区

css绘制圆弧形进度条

当然,进度条不可能只有直线型的。还有非常多其他类型的,下面我们首先来看看圆弧型的进度条。 在今天,我们可以使用 CSS 快速的创建圆弧形式的进度条,类似于这样: 核心就是使用角向...

咸安区

利用CSS绘制进度条

使用百分比实现进度条 最为常见的一种方式是使用背景色配合百分比的方式绘制进度条。 最简单的一个 DEMO: div class=g-container div class=g-progress/div /div .g-container { width: 240px; height: 25px; border-ra...

咸安区

WeakMap的使用方法

WeakMap 有四个使用方法:分别是 get、set、has、delete,下面我们看一下其大致的用法: const wm1 = new WeakMap(), wm2 = new WeakMap(), wm3 = new WeakMap(); const o1 = {}, o2 = function() {}, o3 = window; wm1.set(o1, 37); wm1....

咸安区

CSS3绘制箭头按钮按钮

接下来是箭头按钮,仔细观察下面的切角按钮,当两边的角被切掉的足够多的时候,就变成了一个箭头的形状。 我们可以利用两重渐变,实现一个单箭头按钮: div class=arrowarrow/div .arrow { back...

咸安区

CSS3绘制切角图形按钮

利用 clip-path 实现渐变背景的切角图形 当然,这个技巧有个问题,当要求底色是渐变色的时候,这个方法就比较笨拙了。 好在,我们还有另外一种方式,借助 clip-path 切出一个切角图形,这样...

咸安区

CSS3绘制切角按钮与渐变色背景

最常见的方法主要是借助渐变 linear-gradient 实现,来看这样一个图形 div/div .notching { background: linear-gradient(135deg, transparent 10px, #ff1493 0); background-repeat: no-repeat; } 结果如下, 基于此,我们只需要利...

咸安区

FlyFish是什么?

FlyFish是什么? 支持大屏比例和自适应方案 支持自定义组建样式和交互逻辑 支持全局数据集、全局自定义函数、全局时间等事件 支持静态mock、yapi、http等多重数据格式接入 免费开源,内网部...