炫酷背景特效的通性 #

炫酷背景特效的通性 #

第 1 节我们对 Canvas 进行了简单的介绍，第 2 节介绍了 Canvas 的应用场景，在第 3 节中，我们对 Canvas 绘制图形进行了简单的介绍。

在第 2 节中，我们欣赏了众多的 Canvas 应用场景，本小册的重点就是教怎么才能写出炫酷的网页背景特效。

前面全部都是在介绍和讲一些 Canvas 基础，本节，将带大家分析那些看上去特别炫酷的特效都有哪些通性。

通过第 2 节的实例，我们可以总结出适合做背景的炫酷特效都具有哪些特征，在接下来的章节中我们将结合具体的实例实现。

接下来，我们来分析下本小册的主题：“制作炫酷的网页背景特效”，我们可以从中提取出以下关键词：

• 背景
• 炫酷
• 效果

我们分别从这三个方面来分析，一个炫酷的网页背景都有哪些通性。

背景 #

我们要制作的是一个可以作为背景的特效，那么首要的条件就是这是一个背景，我们这里所说的背景是一个全屏的背景，充满你整个屏幕，我们来分析下 “全屏” 背景应该是怎样的。

在普通的页面制作中，我们观察设计稿，可以看出，背景往往是纯色的或者是渐变的，再或者就是有规律的可以平铺的图形。

为什么要将背景设置为纯色、渐变或可平铺的图形呢？

首先是因为用户使用的显示屏的尺寸我们是不知道的，甚至不知道是移动设备还是 PC，综合起来，能够显示我们网站的设备就太多了。

为了适配所有的设备，尽可能让所有的设备都能够显示出相同的效果，不能相差太远，这种情况我们就只能将背景设置为单一的颜色，或者两种颜色（渐变），再或者一些可平铺的图案，让其在各个终端下都有相同的显示效果。

说到渐变，我个人是比较喜欢将背景设置为渐变的，关注我的朋友可能都知道，我文章的封面图一般都是一个渐变的背景 + 文字。简洁却不简单，因为每一个渐变图案都是我自己精挑细选的。

也有人问我我的渐变颜色的取值都是从哪里去的呢？是我有独特的审美吗，(/□＼*)

我也希望是我自己做出来的啦，但是，答案，当然不是的啦，都是在网站上 down 的。网址可以分享给大家：uigradients。

这个网站可以自己生成渐变色，你的配色也可以跟大家分享，可以保存为图片，也可以导出为 CSS 样式。

我们可以从这个网站上找到喜欢的配色，然后导出为 CSS 样式使用。

我们看上面的两个例子，背景都是使用了渐变元素。第一个例子是一个气泡的效果。背景使用的是随机生成的颜色，使用我们上节介绍的 Canvas 设置渐变的方式。

下面的星空背景的渐变实际上不是使用 Canvas 写的，只是使用 CSS 写出的效果。实现的方式是：

下面的树是一个 png 的背景

然后我们将 body 的颜色设置为黑色到蓝色的由上向下的渐变：

background: linear-gradient(to bottom,#000000 0%,#5788fe 100%);

效果如下：

接下来我们要设置一个全屏的遮罩，将这个遮罩的背景色设置为红色，然后使用 CSS3 的 animation 属性，使用 animation 改变其透明度，由 0 变为 0.9。

        .filter {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: #fe5757;
            animation: colorChange 30s ease-in-out infinite;
            animation-fill-mode: both;
            mix-blend-mode: overlay;
        }

        @keyframes colorChange {
            0%, 100% {
                opacity: 0;
            }
            50% {
                opacity: .9;
            }
        }

效果就和上面动态的效果一样。

炫酷 #

第二个关键词是“炫酷”，我们要做到炫酷的特点，就是要让别人看到你的博客背景之后，发出 “哎呦，不错哦” 的感叹！

那么你的博客背景有怎样的特点才会让用户眼前一亮呢？我分析主要是因为以下两个原因：

• 动
• 随机

因为网页技术的发展，最先开始只能显示单一的文字，然后慢慢开始支持图片资源，直到 HTML5 才支持音频和视频等媒体资源，并且现在大部分我们看到的资源都是图片 —— 也就是静态资源。

所以，页面上有元素在“动”，都将会吸引我们的眼球。

怎么能让页面上的元素动起来呢？我们有以下几种方式：

• gif 图
• CSS3 动画
• js 控制
• svg
• Canvas

以上几种方式都可以创建动画，但是怎样的动画更能引人入胜呢？

这就需要符合另一个特点：“随机”。设置为“随机” 的动画有什么好处呢？

人都有一种心理，一旦找到事物发展的规律，便对其失去了兴趣。

也就是说，如果你的动画是一个规律的，并且规律是简单可寻的，那么用户在看过一次之后，找到了其中的规律，第二次再看的时候便不会再对其感兴趣。

相反，我们就可以写出让用户每一次打开都不一样的特效，这样用户会感觉到“新奇”，便会对你的网站感兴趣。

使用 gif 图大家都知道，只能是有规律的“动”，并且 gif 图片的尺寸不宜过大，在我们的网页背景中，基本上是不会用到的。

CSS3 实现的动画效果，也是只能做有规律的“动”，并且 CSS 只能操纵单个的 DOM 元素，一旦元素到达一定的数量，代价是比较大的。

所以我们选择 js + Canvas 来实现“随机”的“动”。

具体的写法我们将会在后面的章节介绍。我们先来接着看第三个特点：效果。

效果 #

这里我们说的效果主要是与鼠标之间的交互效果。

与鼠标之间有互动的效果主要是产生用户行为的反馈，比如在网页制作中，我们经常使用 hover 变色表示用户的鼠标在元素上方悬停。这就是用户行为的一种反馈。

我们经常使用的与鼠标之间的交互效果主要有两种：

• 鼠标跟随
• 视觉差

记得当年 QQ 空间盛行的时候，就有很多这种鼠标跟随的效果，鼠标滑过的路径，能够生产一个长长的尾巴，甚是招人喜欢。同样的，如果我们能实现鼠标跟随的效果，也是极好的。

我们又拿出了这个特效 (ಥ_ಥ)

在这个例子中，我们可以看出，在鼠标经过的地方会出现 “星星” 连成线的效果。

用户很喜欢这种鼠标跟随的效果，个人觉得就是因为它使得网站的显示效果和用户的行为产生了联系，使用户的行为得到了反馈。

还有一种经常见到的效果是数据差的效果，比如：

这是锤子官网的一个特效，鼠标移动到哪哪就会下沉，并且如果你仔细看的话就会发现，上面的月份数字和底部的图片不是在一个层级上的，更加有立体的感觉，这就是视觉差的特效。

这种特效不需要用 Canvas，只需要 CSS 就可以实现，实现方式也不是本节重点，有需要的可以私聊。

我们来总结一下，炫酷的网页背景特效有哪些特点：

• 背景
  • 单一颜色
  • 渐变
  • 平铺
• 炫酷
  • 动
  • 随机
• 特效（与用户交互）
  • 鼠标跟随
  • 视觉差