Menu
Woocommerce Menu

资源大全,实现波浪效果

0 Comment


纯 CSS 实现波浪效果!

2017/07/19 · CSS ·
波浪

本文作者: 伯乐在线 –
chokcoco
。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

一直以来,使用纯 CSS 实现波浪效果都是十分困难的。

因为实现波浪的曲线需要借助贝塞尔曲线。

图片 1

而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法。

图片 2

当然,借助其他力量(SVG、CANVAS),是可以很轻松的完成所谓的波浪效果的,先看看,非
CSS 方式实现的波浪效果。

 

JavaScript 资源大全

2015/12/20 · JavaScript
· 1 评论 ·
资源

本文由 伯乐在线 –
刘健超-J.c
翻译,马艳琼
校稿。未经许可,禁止转载!
英文出处:sorrycc。欢迎加入翻译组。

【导读】:GitHub 上有一个 Awesome – XXX
系列的资源整理。awesome-javascript 是
sorrycc 发起维护的 JS
资源列表,内容包括:包管理器、加载器、测试框架、运行器、QA、MVC框架和库、模板引擎、数据可视化、时间轴、编辑器等等。

伯乐在线已在 GitHub 上发起「JavaScript
资源大全中文版」的整理。欢迎扩散、欢迎加入。


CSS 框架 Bulma 教程

2017/10/26 · CSS ·
Bulma

原文出处:
阮一峰   

网页样式需要大量时间开发,最省事的方法就是使用 CSS 框架。

Bootstrap 是最著名的 CSS
框架,但是今天我想推荐另一个更轻量化、更易用的框架—-Bulma。有了它,即使完全不懂
CSS,也可以轻而易举做出美观的网页。

图片 3

我要感谢
100offer
对我提供赞助。100offer
是国内第一流的人力资源网站,本文结尾有他们的简介,最近想换工作的朋友可以看一下。

使用 SVG 实现波浪效果

借助 SVG ,是很容易画出三次贝塞尔曲线的。

看看效果:

图片 4

代码如下:

JavaScript

<svg width=”200px” height=”200px” version=”1.1″
xmlns=”; <text
class=”liquidFillGaugeText” text-anchor=”middle” font-size=”42px”
transform=”translate(100,120)” style=”fill: #000″>50.0%</text>
<!– Wave –> <g id=”wave”> <path id=”wave-2″
fill=”rgba(154, 205, 50, .8)” d=”M 0 100 C 133.633 85.12 51.54 116.327
200 100 A 95 95 0 0 1 0 100 Z”> <animate dur=”5s”
repeatCount=”indefinite” attributeName=”d” attributeType=”XML”
values=”M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z; M0 100 C145
100, 41 100, 200 100 A95 95 0 0 1 0 100 Z; M0 100 C90 28, 92 179, 200
100 A95 95 0 0 1 0 100 Z”></animate> </path> </g>
<circle cx=”100″ cy=”100″ r=”80″ stroke-width=”10″ stroke=”white”
fill=”transparent”></circle> <circle cx=”100″ cy=”100″
r=”90″ stroke-width=”20″ stroke=”yellowgreen” fill=”none”
class=”percentage-pie-svg”></circle> </svg>

1
2
3
4
5
6
7
8
9
10
11
12
13
<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <text class="liquidFillGaugeText" text-anchor="middle" font-size="42px" transform="translate(100,120)" style="fill: #000">50.0%</text>
    <!– Wave –>
    <g id="wave">
        <path id="wave-2" fill="rgba(154, 205, 50, .8)" d="M 0 100 C 133.633 85.12 51.54 116.327 200 100 A 95 95 0 0 1 0 100 Z">
        <animate dur="5s" repeatCount="indefinite" attributeName="d" attributeType="XML" values="M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z;
                                    M0 100 C145 100, 41 100, 200 100 A95 95 0 0 1 0 100 Z;
                                    M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z"></animate>
        </path>
    </g>
    <circle cx="100" cy="100" r="80" stroke-width="10" stroke="white" fill="transparent"></circle>
    <circle cx="100" cy="100" r="90" stroke-width="20" stroke="yellowgreen" fill="none" class="percentage-pie-svg"></circle>
</svg>

SVG demo
画出三次贝塞尔曲线的核心在于

JavaScript

<path id=”wave-2″ fill=”rgba(154, 205, 50, .8)” d=”M 0 100 C 133.633
85.12 51.54 116.327 200 100 A 95 95 0 0 1 0 100 Z”>

1
<path id="wave-2" fill="rgba(154, 205, 50, .8)" d="M 0 100 C 133.633 85.12 51.54 116.327 200 100 A 95 95 0 0 1 0 100 Z">

“ 这一段。感兴趣的可以自行去研究研究。

 

包管理器

管理着 javascript 库,并提供读取和打包它们的工具。

  • npm – npm 是 javascript 的包管理器。
  • Bower – 一个 web 应用的包管理器。
  • component – 能构建更好 web
    应用的客户端包管理器。
  • spm – 全新的静态包管理器。
  • jam – 一个专注于浏览器端和兼容
    RequireJS 的包管理器。
  • jspm – 流畅的浏览器包管理器。
  • Ender – 没有库文件的程序库。
  • volo – 以项目模板、添加依赖项与自动化生成的方式创建前端项目。
  • Duo – 一个整合 Component、Browserify
    和 Go
    的最佳思想,使开发者能快速方便地组织和编写前端代码的下一代包管理器。

一、简介

Bulma 框架最大的特点,就是简单好用。所有样式都基于class,只需为 HTML
元素指定class,样式立刻生效。

JavaScript

<a class=”button is-primary is-large”>Login</a>

1
<a class="button is-primary is-large">Login</a>

上面代码中,a
元素只需加上几个class,就会出现一个主色调(is-primary)的大(is-large)按钮。

图片 5

Bulma
是一个手机优先的框架,提供五个宽度断点,具有良好的自适应特性,可以随心所欲为不同设备设置不同样式。

  • mobile:小于等于768px
  • tablet:大于等于769px
  • desktop:大于等于1024px
  • widescreen:大于等于1216px
  • fullhd:大于等于1408px

图片 6

它提供二十多种常用组件,比如表单
、表格、图标、面包屑、菜单、导航、Modal
窗口等等。简单的网站,可以不用写任何
CSS 代码。

使用 canvas 实现波浪效果

使用 canvas 实现波浪效果的原理与 SVG
一样,都是利用路径绘制出三次贝塞尔曲线并赋予动画效果。

图片 7

使用 canvas 的话,代码如下:

$(function() { let canvas = $(“canvas”); let ctx =
canvas[0].getContext(‘2d’); let radians = (Math.PI / 180) * 180; let
startTime = Date.now(); let time = 2000; let clockwise = 1; let cp1x,
cp1y, cp2x, cp2y; // 初始状态 // ctx.bezierCurveTo(90, 28, 92, 179, 200,
100); // 末尾状态 // ctx.bezierCurveTo(145, 100, 41, 100, 200, 100);
requestAnimationFrame(function waveDraw() { let t = Math.min(1.0,
(Date.now() – startTime) / time); if(clockwise) { cp1x = 90 + (55 * t);
cp1y = 28 + (72 * t); cp2x = 92 – (51 * t); cp2y = 179 – (79 * t); }
else { cp1x = 145 – (55 * t); cp1y = 100 – (72 * t); cp2x = 41 + (51
* t); cp2y = 100 + (79 * t); } ctx.clearRect(0, 0, 200, 200);
ctx.beginPath(); ctx.moveTo(0, 100); // 绘制三次贝塞尔曲线
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, 200, 100); // 绘制圆弧
ctx.arc(100, 100, 100, 0, radians, 0); ctx.fillStyle = “rgba(154, 205,
50, .8)”; ctx.fill(); ctx.save(); if( t == 1 ) { startTime = Date.now();
clockwise = !clockwise; } requestAnimationFrame(waveDraw); }); })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
$(function() {
    let canvas = $("canvas");
    let ctx = canvas[0].getContext(‘2d’);
    let radians = (Math.PI / 180) * 180;
    let startTime = Date.now();
    let time = 2000;
    let clockwise = 1;
    let cp1x, cp1y, cp2x, cp2y;
    
    // 初始状态
    // ctx.bezierCurveTo(90, 28, 92, 179, 200, 100);
    // 末尾状态
    // ctx.bezierCurveTo(145, 100, 41, 100, 200, 100);
    
    requestAnimationFrame(function waveDraw() {  
        let t = Math.min(1.0, (Date.now() – startTime) / time);
          
        if(clockwise) {
            cp1x = 90 + (55 * t);
            cp1y = 28 + (72 * t);
            cp2x = 92 – (51 * t);
            cp2y = 179 – (79 * t);
        } else {
            cp1x = 145 – (55 * t);
            cp1y = 100 – (72 * t);
            cp2x = 41 + (51 * t);
            cp2y = 100 + (79 * t);
        }
        
        ctx.clearRect(0, 0, 200, 200);
        ctx.beginPath();
        ctx.moveTo(0, 100);
        // 绘制三次贝塞尔曲线
        ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, 200, 100);
        // 绘制圆弧
        ctx.arc(100, 100, 100, 0, radians, 0);
        ctx.fillStyle = "rgba(154, 205, 50, .8)";
        ctx.fill();
        ctx.save();  
        
        if( t == 1 ) {
            startTime = Date.now();
            clockwise = !clockwise;
        }
 
        requestAnimationFrame(waveDraw);
    });
})

canvas demo
主要是利用了动态绘制 ctx.bezierCurveTo() 三次贝塞尔曲线实现波浪的运动效果,感兴趣的可以自行研究。

加载器

JavaScript 的模块或加载系统。

  • RequireJS – JavaScript
    文件和模块的加载器。
  • browserify –
    在浏览器端以 node.js 的方式 require()。
  • SeaJS – 用于 Web 的模块加载器。
  • HeadJS – HEAD 的唯一脚本。
  • curl –
    小巧、快速且易扩展的模块加载器,它能处理 AMD、CommonJS
    Modules/1.1、CSS、HTML/text 和历史脚本。
  • lazyload – 小巧且无依赖的异步
    JavaScript 和 CSS 加载器。
  • script.js – 异步 JavaScript
    加载器和依赖管理器。
  • systemjs –
    AMD、CJS(commonJS) 和符合 ES6 规范的模块加载器。
  • LodJS – 基于 AMD
    的模块加载器。
  • ESL –
    浏览器端的模块加载器,支持延迟定义和 AMD。
  • modulejs – 轻量的 JavaScript
    模块系统。

二、基本用法

Bulma
的安装只需一步,把样式表插入网页即可。

JavaScript

<link rel=”stylesheet” href=”css/bulma.min.css”/>

1
<link rel="stylesheet" href="css/bulma.min.css"/>

使用更简单,就是为 HTML 元素加上class

JavaScript

<a class=”button”>Button</a>

1
<a class="button">Button</a>

上面的代码为 a 元素加上button类,这个链接就会被渲染成按钮。

图片 8

Bulma
提供大量的修饰类,用来改变基类的样式。它们都是以is-has-开头。比如,要改变
Button 的大小,就可以使用下面的修饰类。

JavaScript

a class=”button is-small”>Small</a> <a
class=”button”>Normal</a> <a class=”button
is-medium”>Medium</a> <a class=”button
is-large”>Large</a>

1
2
3
4
a class="button is-small">Small</a>
<a class="button">Normal</a>
<a class="button is-medium">Medium</a>
<a class="button is-large">Large</a>

图片 9

Bulma 默认提供6种颜色。

  • is-primary
  • is-link
  • is-info
  • is-success
  • is-warning
  • is-danger

图片 10

按钮状态的修饰类如下。

  • is-hovered
  • is-focused
  • is-active
  • is-loading

完整的修饰类清单请看官方文档。

纯 CSS 实现波浪效果

好,接下来才是本文的重点!使用纯 CSS 的方式,实现波浪的效果。

你 TM 在逗我?刚刚不是还说使用 CSS
无能为力吗?图片 11

是,我们没有办法直接绘制出三次贝塞尔曲线,但是我们可以利用一些讨巧的方法,模拟达到波浪运动时的效果,姑且把下面这种方法看作一种奇技淫巧。

打包工具

  • browserify – Browserify
    让你能在浏览器端使用 require(‘modules’) ,打包所有依赖。
  • webpack – 为浏览器打包
    CommonJs/AMD 模块。

三、网格体系

Bulma 的网格体系基于 Flex
布局,写起来非常容易。最简单的用法就是使用columns指定容器,使用column指定项目。

图片 12

JavaScript

<div class=”columns”> <div class=”column”>First
column</div> <div class=”column”>Second column</div>
<div class=”column”>Third column</div> <div
class=”column”>Fourth</div> </div>

1
2
3
4
5
6
<div class="columns">
      <div class="column">First column</div>
      <div class="column">Second column</div>
      <div class="column">Third column</div>
      <div class="column">Fourth</div>
</div>

屏幕宽度大于 768px 时,所有项目平铺,平分容器的宽度;宽度小于等于 768px
时,所有项目变成垂直堆叠。

图片 13

以下的修饰类用来指定项目的宽度。

  • 四分之三:is-three-quarters
  • 四分之一: is-one-quarter
  • 三分之二:is-two-thirds
  • 三分之一:is-one-third
  • 二分之一:is-half
  • 五分之四:is-four-fifths
  • 五分之三:is-three-fifths
  • 五分之二:is-two-fifths
  • 五分之一:is-one-fifth

图片 14

此外,还有一些修饰类也非常有用。

  • is-narrow:网格的宽度由内容的宽度决定
  • is-centered:网格内容居中对齐
  • is-gapless:网格之间没有间距

Bulma 也支持12网格体系。

  • is-2
  • is-3
  • is-4
  • is-5
  • is-6
  • is-7
  • is-8
  • is-9
  • is-10
  • is-11

图片 15

如果要指定某个网格偏移,可以用is-offset-修饰类。

  • is-offset-one-quarter
  • is-offset-one-fifth
  • is-offset-8
  • is-offset-1

原理

原理十分简单,我们都知道,一个正方形,给它添加 border-radius: 50%,将会得到一个圆形。

图片 16

border-radius:用来设置边框圆角,当使用一个半径时确定一个圆形。

好的,如果 border-radius 没到 50%,但是接近 50%
,我们会得到一个这样的图形:

图片 17

注意边角,整个图形给人的感觉是有点圆,却不是很圆。额,这不是废话吗 图片 18

好的,那整这么个图形又有什么用?还能变出波浪来不成?

没错!就是这么神奇。:) 我们让上面这个图形滚动起来(rotate) ,看看效果:

图片 19

可能很多人看到这里还没懂旋转起来的意图,仔细盯着一边看,是会有类似波浪的起伏效果的。

而我们的目的,就是要借助这个动态变换的起伏动画,模拟制造出类似波浪的效果。

测试框架

四、响应式布局

前面说过,Bulma 有五个宽度断点,分别是
mobile(手机)、tablet(平板)、desktop(桌面)、widescreen(宽屏)、fullHD(高清)。

columns布局默认是在手机上垂直堆叠,其他宽度都是平铺。如果希望手机也保持平铺,可以加上is-mobile修饰类。

JavaScript

<div class=”columns is-mobile”> <div
class=”column”>1</div> <div class=”column”>2</div>
<div class=”column”>3</div> <div
class=”column”>4</div> </div>

1
2
3
4
5
6
    <div class="columns is-mobile">
      <div class="column">1</div>
      <div class="column">2</div>
      <div class="column">3</div>
      <div class="column">4</div>
    </div>

如果希望手机和平板是垂直堆叠,其他宽度平铺,可以使用is-desktop修饰类。

JavaScript

<div class=”columns is-desktop”> <div
class=”column”>1</div> <div class=”column”>2</div>
<div class=”column”>3</div> <div
class=”column”>4</div> </div>

1
2
3
4
5
6
    <div class="columns is-desktop">
      <div class="column">1</div>
      <div class="column">2</div>
      <div class="column">3</div>
      <div class="column">4</div>
    </div>

如果希望在不同设备,网格占据不同的宽度,可以像下面这样写。

JavaScript

<div class=” column is-half-mobile is-one-third-tablet
is-one-quarter-desktop “> </div

1
2
3
4
5
6
7
<div class="
  column
  is-half-mobile
  is-one-third-tablet
  is-one-quarter-desktop
">
</div

上面代码中,这个网格在手机上占据二分之一宽度,平板三分之一宽度,桌面四分之一宽度,宽屏和高清则是平铺。

Bulma 允许为不同设备指定不同的布局。

JavaScript

<div class=” column is-flex-mobile is-inline-tablet is-block-desktop
“> </div>

1
2
3
4
5
6
<div class="
      column
      is-flex-mobile
      is-inline-tablet
      is-block-desktop
    ">  </div>

上面代码中,手机是 flex 布局,平板是 inline 布局,其他宽度是 block
布局。

下面是隐藏某个项目的修饰类。

  • is-hidden-mobile:只在手机隐藏
  • is-hidden-tablet-only:只在平板隐藏
  • is-hidden-desktop-only :只在桌面隐藏
  • is-hidden-touch:手机和平板隐藏,其他宽度显示

完整的清单请看官方文档。

实现

当然,这里看到是全景实现图,所以感觉并不明显,OK,让我们用一个个例子看看具体实现起来能达到什么样的效果。

我们利用上面原理可以做到的一种波浪运动背景效果图:

图片 20

后面漂浮的波浪效果,其实就是利用了上面的 border-radius: 45% 的椭圆形,只是放大了很多倍,视野之外的图形都 overflow: hidden ,只留下了一条边的视野,并且增加了一些相应的 transform 变换。

注意,这里背景是蓝色静止的,运动是白色的椭圆形。

代码也很简单,SCSS 代码如下:

body { position: relative; align-items: center; min-height: 100vh;
background-color: rgb(118, 218, 255); overflow: hidden; &:before,
&:after { content: “”; position: absolute; left: 50%; min-width: 300vw;
min-height: 300vw; background-color: #fff; animation-name: rotate;
animation-iteration-count: infinite; animation-timing-function: linear;
} &:before { bottom: 15vh; border-radius: 45%; animation-duration: 10s;
} &:after { bottom: 12vh; opacity: .5; border-radius: 47%;
animation-duration: 10s; } } @keyframes rotate { 0% { transform:
translate(-50%, 0) rotateZ(0deg); } 50% { transform: translate(-50%,
-2%) rotateZ(180deg); } 100% { transform: translate(-50%, 0%)
rotateZ(360deg); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
body {
    position: relative;
    align-items: center;
    min-height: 100vh;
    background-color: rgb(118, 218, 255);
    overflow: hidden;
 
    &:before, &:after {
        content: "";
        position: absolute;
        left: 50%;
        min-width: 300vw;
        min-height: 300vw;
        background-color: #fff;
        animation-name: rotate;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
 
    &:before {
        bottom: 15vh;
        border-radius: 45%;
        animation-duration: 10s;
    }
 
    &:after {
        bottom: 12vh;
        opacity: .5;
        border-radius: 47%;
        animation-duration: 10s;
    }
}
 
@keyframes rotate {
    0% {
        transform: translate(-50%, 0) rotateZ(0deg);
    }
    50% {
        transform: translate(-50%, -2%) rotateZ(180deg);
    }
    100% {
        transform: translate(-50%, 0%) rotateZ(360deg);
    }
}

为了方便写 DEMO,用到的长度单位是 VW 与
VH,不太了解这两个单位的可以戳这里:vh、vw、vmin、vmax
知多少

CSS demo
可能有部分同学,还存在疑问,OK,那我们把上面的效果缩小 10
倍,将视野之外的动画也补齐,那么其实生成波浪的原理是这样的:

图片 21

图中的虚线框就是我们实际的视野范围。

图片 22

框架

  • mocha – 适用于 node.js
    和浏览器、简易、灵活、有趣的 JavaScript 测试框架。
  • jasmine – 简单无 DOM 的
    JavaScript 测试框架。
  • qunit – 一个易于使用的 JavaScript
    单元测试框架。
  • jest – 简单的 JavaScript
    单元测试框架。
  • prova – 基于 Tape 和 Browserify
    的测试运行器,它适用于 Node & 浏览器。
  • DalekJS – 自动化且跨浏览器的
    JavaScript 功能测试框架。

五、文字

Bulma 提供7个修饰指定文字大小。

  • is-size-1: 3rem
  • is-size-2: 2.5rem
  • is-size-3: 2rem
  • is-size-4: 1.5rem
  • is-size-5: 1.25rem
  • is-size-6: 1rem
  • is-size-7: 0.75rem

可以为不同设备指定不同的文字大小。

  • is-size-1-mobile:手机是 size-1
  • is-size-1-tablet:平板是 size-1
  • is-size-1-touch:手机和平板是 size-1
  • is-size-1-desktop:桌面、宽屏和高清是 size-1
  • is-size-1-widescreen:宽屏和高清是 size-1
  • is-size-1-fullhd:高清是 size-1

此外,还有字体颜色、对齐、轻重的修饰类。

值得探讨的点

值得注意的是,要看到,这里我们生成波浪,并不是利用旋转的椭圆本身,而是利用它去切割背景,产生波浪的效果。那为什么不直接使用旋转的椭圆本身模拟波浪效果呢?因为

  • 中间高,两边低的效果不符合物理学原理,看上去十分别扭;

可以点进去看看下面这个例子:

CodePen Demo — pure css wave

断言

  • chai – 适用于 node.js 和浏览器的
    BDD / TDD 断言框架,并能搭配其它测试框架使用。
  • Sinon.JS – 对 JavaScript
    进行 spies、stubs 和 mock 测试。
  • expect.js –
    简约的、适用于 Node.js 和浏览器端的 BDD 式断言工具。

六、定制

最后这个部分是高级内容,讲解如何定制 Bulma,也就是修改默认样式。Bulma
采用 Sass 语法(注意,不是 Scss 语法),所以定制的样式也必须使用
SASS。

首先,克隆或下载源码。

JavaScript

$ git clone

1
$ git clone https://github.com/jgthms/bulma.git

然后,安装依赖。

JavaScript

$ cd bulma $ npm install

1
2
$ cd bulma
$ npm install

接着,在源码的根目录里面,新建一个app.sass文件,定制的代码都写在这个文件。在它里面,先引入
Bulma
基础变量。如果需要的话,可以改掉。

JavaScript

@import “./sass/utilities/initial-variables” $blue: #72d0eb $pink:
#ffb3b3 $family-serif: “Merriweather”, “Georgia”, serif

1
2
3
4
5
@import "./sass/utilities/initial-variables"
 
$blue: #72d0eb
$pink: #ffb3b3
$family-serif: "Merriweather", "Georgia", serif

上面代码中,预设的bluepinkfamily-serif变量被改掉。

有一些 Bulma 变量是从基础变量衍生的,需要的话也可以改掉。

JavaScript

$primary: $pink

1
$primary: $pink

上面代码中,主色调改成了pink变量。

接着,在这个文件里面加载 Bulma
的入口脚本。

JavaScript

@import “./bulma”

1
@import "./bulma"

这一行的下面,你就可以写自己的样式了,比如为所有标题加一个下划线。

JavaScript

.title { text-decoration: underline; }

1
2
3
    .title {
      text-decoration: underline;
    }

最后,打开package.json,找到下面这一行。

JavaScript

“build-sass”: “node-sass –output-style expanded –source-map true
bulma.sass css/bulma.css

1
"build-sass": "node-sass –output-style expanded –source-map true bulma.sass css/bulma.css

把里面的bulma.sass改成app.sass

JavaScript

“build-sass”: “node-sass –output-style expanded –source-map true
app.sass css/bulma.css”,

1
    "build-sass": "node-sass –output-style expanded –source-map true app.sass css/bulma.css",

以后每次修改完样式,运行一下npm run build,就会生成自己的样式表css/bulma.css了。

(全文完)

1 赞 5 收藏
评论

图片 23

使用纯 CSS 实现波浪进度图

好,既然掌握了这种方法,下面我们就使用纯 CSS 实现上面最开始使用 SVG 或者
CANVAS 才能实现的波浪进度图。

HTML 结构如下:

<div class=”container”> <div class=”wave”/> </div>

1
2
3
<div class="container">
    <div class="wave"/>
</div>

CSS 代码如下:

.wave { position: relative; width: 200px; height: 200px;
background-color: rgb(118, 218, 255); border-radius: 50%; &::before,
&::after{ content: “”; position: absolute; width: 400px; height: 400px;
top: 0; left: 50%; background-color: rgba(255, 255, 255, .4);
border-radius: 45%; transform: translate(-50%, -70%) rotate(0);
animation: rotate 6s linear infinite; z-index: 10; } &::after {
border-radius: 47%; background-color: rgba(255, 255, 255, .9);
transform: translate(-50%, -70%) rotate(0); animation: rotate 10s linear
-5s infinite; z-index: 20; } } @keyframes rotate { 50% { transform:
translate(-50%, -73%) rotate(180deg); } 100% { transform:
translate(-50%, -70%) rotate(360deg); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
.wave {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: rgb(118, 218, 255);
    border-radius: 50%;
    &::before,
    &::after{
        content: "";
        position: absolute;
        width: 400px;
        height: 400px;
        top: 0;
        left: 50%;
        background-color: rgba(255, 255, 255, .4);
        border-radius: 45%;
        transform: translate(-50%, -70%) rotate(0);
        animation: rotate 6s linear infinite;
        z-index: 10;
    }
    
    &::after {
        border-radius: 47%;
        background-color: rgba(255, 255, 255, .9);
        transform: translate(-50%, -70%) rotate(0);
        animation: rotate 10s linear -5s infinite;
        z-index: 20;
    }
}
 
@keyframes rotate {
    50% {
        transform: translate(-50%, -73%) rotate(180deg);
    } 100% {
        transform: translate(-50%, -70%) rotate(360deg);
    }
}

效果图:

图片 24

CodePen Demo — Pure Css Wave
Loading

 

虽然效果差了一点点,但是相较于要使用学习成本更高的 SVG 或者
CANVAS,这种纯 CSS 方法无疑可使用的场景更多,学习成本更低!

 

覆盖率

  • istanbul – 另一个 JS
    代码覆盖率检测工具。
  • blanket –
    一个简单的代码覆盖率检测库。它的设计理念是易于安装和使用,且可用于浏览器端和
    node.js。
  • JSCover – JSCover 是一个检测
    JavaScript 程序代码覆盖率的工具。

一些小技巧

单纯的让一个 border-radius 接近 50
的椭圆形旋转,动画效果可能不是那么好,我们可以适当的添加一些其他变换因素,让动画效果看上去更真实:

  • 在动画过程中,动态的改变 border-radius 的值;
  • 在动画过程中,利用 transform 对旋转椭圆进行轻微的位移、变形;
  • 上面也演示到了,多个椭圆同时转动,赋予不同时长的动画,并且添加轻微的透明度,让整个效果更佳逼真。

 

运行器

  • phantomjs – 脚本化的
    Headless WebKit。
  • slimerjs – 一个内核为 Gecko
    的类似 PhantomJS 工具。
  • casperjs – 基于 PhantomJS 和
    Slimer JS 的导航脚本和测试工具。
  • zombie – 基于 node.js
    、快速、全栈且无图形界面的浏览器的测试工具。
  • totoro –
    一个简单可靠且能跨浏览器运行的测试工具。
  • karma – 一个优秀的的
    JavaScript 测试运行器。
  • nightwatch – 基于
    node.js 和 selenium webdriver 的图形界面自动化测试框架。
  • intern – 下一代 JavaScript
    代码测试栈。
  • yolpo – 在浏览器逐句执行的 JavaScript
    解释器。

最后

系列 CSS
文章汇总在我的 Github ,持续更新,欢迎点个
star 订阅收藏。

好了,本文到此结束,希望对你有帮助 🙂

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

打赏支持我写出更多好文章,谢谢!

打赏作者

QA 工具

  • JSHint – JSHint
    是一个有助于发现 JavaScript 代码错误和潜在问题的工具。
  • jscs – JavaScript
    代码风格检测工具。
  • jsfmt – 格式化、搜索和改写
    JavaScript。
  • jsinspect –
    检测复制粘贴和结构类似的代码。
  • buddy.js – 发现
    JavaScript 代码里的
    魔术数字。
  • ESLint – 完全插件化的工具,能在
    JavaScript 中识别和记录模式。
  • JSLint – 高标准、严格和固执的代码质量工具,旨在只保持语言的优良部分。

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 25
图片 26

2 赞 7 收藏
评论

MVC 框架和库

  • angular.js – 为网络应用增强
    HTML。
  • aurelia – 一个适用于移动设备、桌面电脑和 web
    的客户端 JavaScript 框架。
  • backbone – 给你的 JS
    应用加入带有 Models、Views、Collections 和 Events 的 Backbone。
  • batman.js – 最适合 Rails 开发者的 JavaScript
    框架。
  • ember.js – 一个旨在创建非凡
    web 应用的 JavaScript 框架。
  • meteor –
    一个超简单的、数据库无处不在的、只传输数据的纯 JavaScript web 框架。
  • ractive – 新一代 DOM 操作。
  • vue – 一个用于构建可交互界面的、直观快速和可组合的 MVVM
    框架。
  • knockout – Knockout 用
    JavaScript 让创建响应式的富 UI 更加容易。
  • spine – 构建 JavaScript 应用的轻量
    MVC 库。
  • espresso.js –
    一个极小的、用于制作用户界面的 JavaScript 库。
  • canjs – 让 JS
    更好、更快、更简单。
  • react –
    用于建构用户界面的库。它是声明式的、高效的和极度灵活的,并使用虚拟
    DOM 作为其不同的实现。
  • react-native – 一个用
    React 构建原生应用的框架。
  • riot – 类 React 库,但很轻量。
  • thorax – 加强你的
    Backbone。
  • chaplin – 使用 Backbone.js
    库的 JavaScript 应用架构。
  • marionette – 一个
    Backbone.js 的复合应用程序库,旨在简化大型 JavaScript 应用结构。
  • ripple –
    一个小巧的、用于构建响应界面的基础框架。
  • rivets –
    轻量却拥有强大的数据绑定和模板解决方案
  • derby –
    让编写实时和协同应用更简单的 MVC 框架,能够在 Node.js
    和浏览器同时运行。

    • derby-awesome –
      很棒的 derby 组件集合。
  • way.js –
    简单、轻量、持久化的双向数据绑定。
  • mithril.js – Mithril
    是一个客户端 MVC 框架(轻量、强大和快速)
  • jsblocks – jsblocks
    是一个更好的 MV-ish 框架。
  • LiquidLava –
    易懂的、用于构建用户界面的 MVC 框架。

关于作者:chokcoco

图片 27

经不住流年似水,逃不过此间少年。

个人主页 ·
我的文章 ·
63 ·
   

图片 23

Node CMS 框架

  • KeystoneJS – 强大的 CMS 和
    web 应用框架。
  • Reaction Commerce –
    拥有实时的架构和设计的响应式(reactive) CMS。
  • Ghost – 简单、强大的发布平台。
  • Apostrophe –
    提供内容编辑和基本服务的 CMS。
  • We.js –
    适用于实时应用、网站或博客的框架。
  • Hatch.js – 拥有社交特性的
    CMS 平台。
  • TaracotJS –
    拥有快速、极简风格特点且基于Node.js 的 CMS。
  • Nodizecms – 为 CoffeeScript
    爱好者准备的 CMS。
  • Cody –
    拥有所见即所得的编辑器的 CMS。
  • PencilBlue – CMS
    和博客平台。

模板引擎

模板引擎允许您执行字符串插值。

  • mustache.js – 是 JavaScript
    中带有 {{mustaches}} 的最简模板。
  • handlebars.js – 是
    Mustache 模板语言的扩展。
  • hogan.js – 是 Mustache
    模板语言的编译器。
  • doT – 最快速简洁的 JavaScript
    模板引擎,适用于 nodejs 和浏览器。
  • dustjs – 适用于浏览器和
    node.js 的异步模板。
  • eco – 嵌入式的 CoffeeScript
    模板。
  • JavaScript-Templates –
    轻量(小于 1KB)、快速且无依赖的强大 JavaScript 模版引擎。
  • t.js – 小巧的 JavaScript
    模板框架,压缩后约为 400 字节。
  • Jade – 健壮的、优雅且功能丰富的
    nodejs 模板引擎。
  • EJS – 高效的 JavaScript 模板。
  • xtemplate –
    可扩展的模板引擎,适用于 node 和浏览器。
  • marko – 快速轻量且基于 HTML
    的模板引擎,支持异步、流、自定义标签和 CommonJS 模编译后输出。适用于
    Node.js 和浏览器。

文章和帖子

  • The JavaScript that you should
    know –
    关于 JavaScript 函数化概念的文章。

数据可视化

Web 数据可视化工具

  • d3 – 一个对 HTML 和 SVG
    进行可视化的 JavaScript 库。
  • metrics-graphics –
    更简洁和拥有更规范的数据图表布局优化算法的库。
  • pykcharts.js –
    经过精心设计后,去除 d3.js 复杂性的 d3.js 图表库。
  • three.js – JavaScript 3D 库。
  • Chart.js – 简单的、基于 canvas
    标签的 HTML5 图表库。
  • paper.js –
    是矢量图形脚本中的瑞士军刀 —— 使用 HTML5 Canvas 将 Scriptographer
     移植到 JavaScript 和浏览器。
  • fabric.js – JavaScript Canvas
    库,SVG 与 Canvas 可以相互解析。
  • peity –
    进度条、线状和饼状图。
  • raphael – JavaScript
    矢量库。
  • echarts – 商业产品图表。
  • vis –
    动态的、基于浏览器的可视化库。
  • two.js – 一个渲染器无关的适用于
    web 的二维绘图 api 。
  • g.raphael –
    基于 Raphaël 图表库。
  • sigma.js –
    一个致力于图形绘画的 JavaScript 库。
  • arbor – 一个使用 web workers
    和 jQuery 的图形可视化库。
  • cubism –
    可视化时间序列的 D3 插件。
  • dc.js – 与 crossfilter
    无缝合作的多维图表绘制库,使用 d3.js 渲染。
  • vega – 一套可视化语法。
  • processing.js – Processing.js 基于 Web
    标准使数据可视化,而无需任何插件。
  • envisionjs – 动态的
    HTML5 可视化。
  • rickshaw –
    用于构建交互式实时图表的 JavaScript 工具包。
  • flot – 吸引人的、基于 jQuery 的
    JavaScript 图表库。
  • morris.js –
    漂亮的时间序列线框图。
  • nvd3 – 一个为 D3.js
    构建可复用图表和图表组件的库。
  • svg.js –
    一个轻量的、用于操作和添加 SVG 动画的库。
  • heatmap.js – 基于 HTML5 canvas
    的热力图 JavaScript 库。
  • jquery.sparkline –
    一个直接在浏览器端生成小型走势图的 jQuery 插件。
  • xCharts – 一个基于
    D3、用于构建自定义图表和图形的库。
  • trianglify – 基于 d3.js
    的低多边形(low poly)风格背景图片生成器。
  • d3-cloud – 创建词云(word
    cloud)效果的 JavaScript 库。
  • d4 – 一个基于 D3
    、友好、可复用的 DSL 图表库 。
  • dimple.js – 基于 d3 的简易商业分析图表库。
  • chartist-js –
    简单的响应式图表。
  • epoch – 一个通用的实时图表库。
  • c3 – 基于 D3 的可复用图表库。
  • BabylonJS –
    一个运用 HTML5 和 WebGL 构建 3D 游戏的框架。

也有一些很棒的收费库,如 amchart、plotly 和 highchart。

时间轴

  • TimelineJS –  一个用
    JavaScript 编写的可叙事时间轴库。
  • timesheet.js –
    用于构建简单的 HTML5 & CSS3 时间表的 JavaScript 库。

编辑器

  • ace – Ace(Ajax.org Cloud9
    Editor)。
  • CodeMirror –
    浏览器端的代码编辑器。
  • esprima – 用于综合分析的
    ECMAScript 解析器。
  • quill – 一个带有 API
    的跨浏览器富文本编辑器。
  • medium-editor – Medium.com
    所见即所得编辑器的克隆版。
  • pen – 享受在线编辑(支持
    markdown)。
  • jquery-notebook –
    一个易用的、简洁优雅的文本编辑器。灵感来源于 Medium 的魅力。
  • bootstrap-wysiwyg –
    小巧的、兼容 bootstrap 的所见即所得的富文本编辑器。
  • ckeditor-releases –
    适用于每个人的 web 文本编辑器。
  • editor – 一个 markdown
    编辑器,但仍在开发中。
  • EpicEditor –
    一个可嵌入的 JavaScript Markdown
    的编辑器,拥有全屏编辑、即时预览、自动保存草稿和离线支持等功能。
  • jsoneditor –
    查看、编辑和格式化 JSON 的 web 工具。
  • vim.js –  拥有持久化
    ~/.vimrc 的 Vim 编辑器的 JavaScript 移植版本。
  • Squire – HTML5 富文本编辑器。
  • TinyMCE – JavaScript
    富文本编辑器。
  • trix – 由 Basecamp
    制作,适用于每天写作的富文本编辑器。

文件

处理文件的库。

  • Papa Parse – 一款强大的 CSV
    库,支持解析 CSV 文件/字符串,也能导出 CSV。
  • jBinary –
    对用声明式语法描述文件类型和数据结构的二进制文件,进行高级
    I/O(加载、解析、操作、序列化、存储)操作。

函数式编程

函数式编程库扩展了 JavaScript 的能力。

  • underscore – JavaScript
    的实用工具。
  • lodash –
    提供一致性、可定制、高性能和额外功能的实用库。
  • Sugar –
    一个扩展了原生对象功能的 JavaScript 库。
  • lazy.js –
    类似 Underscore,但性能更优越
  • ramda – 一个针对 JavaScript
    程序员的实用函数库。
  • mout – 模块化的 JavaScript 工具库。
  • mesh – 流数据同步工具。

响应式编程

响应式程序库扩展了 JavaScript 的能力。

  • RxJs – 对 JavaScript
    进行响应式扩展。
  • Bacon – JavaScript 的
    FPR(函数式响应式编程)库。
  • Kefir – 受 Bacon.js 和 RxJS
    启发的 FRP 库,专注于高性能和低内存消耗。
  • Highland – 对 JavaScript
    实用工具的重新思考,Highland
    能轻易地管理同步和异步信息,而且仅使用标准 JavaScript 和类 Node 流。
  • Most.js – 高性能 FRP 库。

数据结构

数据结构库用于构建一个更复杂的应用。

  • immutable-js –
    不可变的数据集合,包括 Sequence、Range、Repeat、Map、OrderedMap、Set
    和 sparse Vector。
  • mori – 使用 ClojureScript
    持久化数据结构和支持原生 JavaScript API 的库。
  • buckets –
    完整的、经过充分测试和记录数据结构的 JavaScript 库。
  • hashmap – 简单的 hashmap
    实现,支持任何类型的键值。

日期

日期库。

  • moment –
    解析、验证、操作和显示日期。
  • moment-timezone – 基于
    moment.js 的时区库。
  • jquery-timeago –
    一款支持自动更新模糊时间戳的 jQuery 插件(如:”4 分钟之前”)。
  • timezone-js – 让 JavaScript
    Date 对象拥有时区功能。使用 Olson zoneinfo 文件记录着时区数据。
  • date – 拥有人性化的 Date()
    方法。
  • ms.js – 小巧的毫秒转换工具。

字符串

字符串库。

  • selecting –
    一个允许你获取用户选定文本的库。
  • underscore.string –
    扩展了 Underscore.js 的字符串操作。
  • string.js – 额外的
    JavaScript 字符串方法。
  • he – 健壮的 HTML
    实体编码/解码器。
  • multiline –
    多行字符串。
  • query-string –
    解析和字符串化 URL 查询字符串。
  • URI.js – URL 操作库。
  • jsurl – 轻量的 URL 操作库。
  • sprintf.js –
    实现字符串格式化。
  • url-pattern – 让 url
    和其它字符串进行比正则表达式匹配更简单。字符串和数据可相互转化。

数字

  • Numeral-js –
    对数字进行格式化和操作的库。
  • odometer –
    流畅的数字过渡效果。
  • accounting.js –
    对数字、金钱、货币进行格式化的轻量库——完全本地化和无依赖。
  • money.js –
    一个小巧(1kb)的货币转换库,适用于 web 和 nodeJS。
  • Fraction.js –
    一个有理数库。
  • Complex.js –  一个复数库。
  • Polynomial.js –
    一个多项式库。
标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图