只用 CSS 就能做到的像素画/像素动画

时间: 2019-04-15阅读: 45标签: 动画

这篇文章将会介绍只用 CSS 就能制作像素画·像素动画的方法。虽说纯 CSS 就能做到,但是为了更高的可维护性,也会顺便介绍使用 Sass 的制作方法。

上面的马里奥和 Minecraft 方块都没有使用 JavaScript,单纯使用 CSS 动画制作。


关于 box-shadow 属性

绘制像素点可以借助 box-shadow 属性。
原本 box-shadow 属性用于制作阴影效果,先介绍一下基本用法。

该属性的写法有几种:

  • box-shadow: offset-x offset-y color
  • box-shadow: offset-x offset-y blur-radius color
  • box-shadow: offset-x offset-y blur-radius spread-radius color
  • box-shadow: inset offset-x offset-y color

offset-x 和 offset-y 用于指定阴影偏移位置。以元素的左上角为原点,指定 XY 轴移动的位置。 color 字面意思,指定阴影颜色。 blur-radius 指定模糊效果的半径。跟 border-radius 差不多。 spread-raduis 模糊范围的扩大与缩小。 inset 关键字可以使阴影效果显示在元素内则。

文字说明或许不够形象,我们可以直接看效果:https://jsfiddle.net/bc_rikko/0b9cgtx8


基础:描绘一个像素点

box-shadow 基础都明白了,就可以进入下一步:描绘一个像素点。 对一个边长 100px 的正方形使用 box-shadow:

<div>
    <div></div>
</div>

<style>
* {
  /* 为了方便看到元素而添加的边框(不加也行) */
  box-sizing: border-box;
}
.container {
  /* 长和宽包括 box-shadow */
  width: 200px;
  height: 200px;
}

.box {
  /* 元素属性 */
  width: 100px;
  height: 100px;
  border: 2px solid #777;

  /* 在元素右下角相同大小的方块 */
  box-shadow: 100px 100px rgba(7,7,7,.3);
}
</style>

如图所示,使用 box-shadow 描绘了一个与元素相同大小的阴影。代码的意思是把一个 100px 的方形的影子放到 (100px, 100px) 的位置。


进阶:用 box-shadow 属性绘制像素画

完成预想图

这两个都是 5✖️5 的像素画,我们先从左边开始:

<div class="container">
  <div class="pixel one"></div>
</div>

<style>
.container {
  /* 像素画的大小 */
  width: 100px;
  height: 100px;
}

.pixel {
  /* 使伪元素的位置可调整 */
  position: relative;
}
.pixel::before {
  content: "";

  /* 一个点的大小(例:20px x 20px) */
  width: 20px;
  height: 20px;
  /* box-shadow 着色,伪元素设为透明 */
  background-color: transparent;

  /* 调整伪元素位置,让左上角成为(0,0) */
  position: absolute;
  top: -20px;
  left: -20px;
}

.pixel.one::before {
  box-shadow:
     /* 列 行 色 */
     /* 第1列 */
     20px   20px #FB0600,
     20px   40px #FC322F,
     20px   60px #FC6663,
     20px   80px #FD9999,
     20px  100px #FECCCB, 
     /* 第2列 */
     40px   20px #60169F,
     40px   40px #7A23B0,
     40px   60px #964DC2,
     40px   80px #B681D9,
     40px  100px #D8BEED, 
     /* 第3列 */
     60px   20px #1388BC,
     60px   40px #269DC9,
     60px   60px #55B3D7,
     60px   80px #88CAE2,
     60px  100px #BFE3EF, 
     /* 第4列 */
     80px   20px #ACD902,
     80px   40px #BDE02D,
     80px   60px #CDEA5E,
     80px   80px #DBEF8E,
     80px  100px #F4FBC8, 
     /* 第5列 */
    100px  20px #FB8F02,
    100px  40px #FDA533,
    100px  60px #FDBB64,
    100px  80px #FED39A,
    100px 100px #FDE8C9;
}
</style>

首先,box-shadow 生产的影子大小不包括本体元素的大小,container 类的大小设为像素画完成后的大小就行。 接着,box-shadow 的影子大小由,pixel 类的大小决定,所以把 width 和 height设定为 20px。 实际的点是 before 伪元素绘制的,pixel 的 20px 正方形会在左上角留下空位,为此可以使用 position: absolute 调整。 最后使用 box-shadow 逐格绘制像素画。

接着实现右边的像素画。

.pixel.two::before {
  box-shadow:
    20px   20px #704b16,
    40px   20px #704b16,
    60px   20px #704b16,
    80px   20px #704b16,
    100px  20px #704b16,
    20px   40px #704b16,
    40px   40px #fdb778,
    60px   40px #fdb778,
    80px   40px #fdb778,
    100px  40px #704b16,
    20px   60px #fdb778,
    40px   60px #333333,
    60px   60px #fdb778,
    80px   60px #333333,
    100px  60px #fdb778,
    20px   80px #fdb778,
    40px   80px #fdb778,
    60px   80px #fdb778,
    80px   80px #fdb778,
    100px  80px #fdb778,
    20px  100px #fdb778,
    40px  100px #c70300,
    60px  100px #c70300,
    80px  100px #c70300,
    100px 100px #fdb778;
}


应用:使用 Sass 编写可维护像素画

上面写的几个例子,至少我是没什么信心去维护好他们。5x5 的像素画要写 25 次属性值,一般的 16x16 则是多达 256 个值。 所以,我们可以使用 Sass 编写可维护像素画。 Sass 环境搭建可以参考以下文章(日语) https://kuroeveryday.blogspot.com/2018/10/setup-sass-development-environment.html

Sass 使用 mixin(function 亦可)生成样式的方法:

@mixin pixelize($matrix, $size, $colors) {
  $ret: "";

  @for $i from 1 through length($matrix) {
    $row: nth($matrix, $i);

    @for $j from 1 through length($row) {
      $dot: nth($row, $j);

      @if $dot != 0 {
        @if $ret != "" {
          $ret: $ret + ",";
        }

        $color: nth($colors, $dot);
        $ret: $ret + ($j * $size) + " " + ($i * $size) + " " + $color;
      }
    }
  }

  box-shadow: unquote($ret + ";");
}

$heart-colors: (#333, #f11416, #831200);
$heart: (
  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
  (0,0,1,1,1,0,0,0,0,0,1,1,1,0,0,0),
  (0,1,2,2,2,1,0,0,0,1,2,2,3,1,0,0),
  (1,2,0,0,2,2,1,0,1,2,2,2,2,3,1,0),
  (1,2,0,2,2,2,2,1,2,2,2,2,2,3,1,0),
  (1,2,2,2,2,2,2,2,2,2,2,2,2,3,1,0),
  (1,2,2,2,2,2,2,2,2,2,2,2,2,3,1,0),
  (1,2,2,2,2,2,2,2,2,2,2,2,2,3,1,0),
  (0,1,2,2,2,2,2,2,2,2,2,2,3,1,0,0),
  (0,0,1,2,2,2,2,2,2,2,2,3,1,0,0,0),
  (0,0,0,1,2,2,2,2,2,2,3,1,0,0,0,0),
  (0,0,0,0,1,2,2,2,2,3,1,0,0,0,0,0),
  (0,0,0,0,0,1,2,2,3,1,0,0,0,0,0,0),
  (0,0,0,0,0,0,1,3,1,0,0,0,0,0,0,0),
  (0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0),
  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
);

.icon {
  width: 20px;
  height: 20px;
  @include pixelize($heart, 20px, $heart-colors);
}

定义名为 pixelize 的 mixin,把像素画的矩阵($heart)像素点的大小(20px)颜色列表($hearts-colors)传入其中,即可生成 box-shadow 属性。 像素画的矩阵用数字 0~N 表示,0 为透明,1~n 为颜色列表对应颜色。

如果有代码高亮的话,像素画的图案就一目了然啦。

与原生 CSS 相比,这样简单多了吧?

如果这样都觉得麻烦,可以使用 CSS 像素画生成器~

CSSドット絵ジェネレータ


番外篇:制作像素动画

之前 icon 类直接使用 box-shadow 属性绘制像素画,在制作像素动画时,需要使用 CSS animation。

.mario {
  width: 8px;
  height: 8px;

  animation:
    jump 1s infinite,
    sprite 1s infinite;
}

/* 跳跃动作(上下移動) */
@keyframes jump {
  from, 25%, 75%, to {
    transform: translateY(0);
  }
  50% {
    transform: translateY(calc(8px * -8));
  }
}

/* 普通状态和跳跃状态的像素画 */
@keyframes sprite {
  /* 对比 animation-timing-function: steps(n)
   * 使用百分比可以更细致的调整动画时间 
   */
  from, 24%, 76%, to {
    box-shadow: /* 普通状态的像素画 */
  }
  25%, 75% {
    box-shadow: /* 跳跃状态的像素画 */
  }
}

使用 CSS 动画修改 box-shadow 和元素的位置,看起来就像是跳起来一样。 详细代码可以在 github 仓库中了解 https://github.com/BcRikko/css-collection


原文链接:box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる

css3元素动画实例

css3中实现动画一般有两种方式,一个是transition过渡,一个是animation动画。最主要区别就是transition需要条件触发,通常会用hover来触发,而animation则更灵活,可以自动播放,也可以通过条件触发。

wow.js让css3动画变动更有趣(滚动页面动画模拟懒加载特效)

CSS3的出现给网站页面增加了活力,网站增色不少,有这么小小的一款插件就能做出很多动画效果。最重要的是它:简单易用、轻量级、无需 jQuery......他就是wow.js

css3常用动画+动画库

animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库。Effect.css 针对不同UI的CSS3动画和过渡效果集,包含了丰富的CSS3动画和过渡效果,Hover.css是一套使用CSS3动画实现的Hover特效集锦

CSS3动画与JS动画的优缺点?

如果动画只是简单的状态切换,不需要中间过程控制,在这种情况下,CSS3动画是优先选择方案。它可以让你将动画逻辑放在样式文件里面,而不会让你的页面充斥JS库。然而如果你在设计很复杂的富客户端界面或者开发一个有着复杂UI状态的APP

css3动画,监控动画执行完毕

CSS3之前,在网页上要做动画,一般使用javascript来实现,用timer定时执行一些操作来实现动画效果。自有了CSS3之后,在网页上做动画变得更简单了。相对于使用javascript的实现方式,用CSS3实现的动画效果更流畅,实现起来也更简单。

WEB 动画的一些实现方式

WEB 的动画实现多种多样,随着H5 的发展,实现动画的方式越来越多了。初步统计实现动画的方式有以下一些方式实现:GIF动画、FLASH动画 / SilverLight、Javascript + HTML、SMIL、APNG、Javascript + SVG、Video、Javascript + Canvas、CSS3 transition/animation

transform 的副作用

transform是一些效果的集合,主要是移动、旋转、缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效果。变形transform可以实现2D和3D两种效果。

Vue 动画的封装

js提供的钩子动画before-enter、enter、after-enter,用这种方法写,所有的动画都写在了组件里,外部只需要调用这个fade组件就可以了,也不需要全局去写一些样式了,这种动画的封装是比较推荐的一种动画封装,因为它可以把所有动画的实现完整的封装在一个组件中

Vue 中 JS 动画与 Velocity.js 的结合

前面学习了用css实现动画效果,那 Vue 中能不能用js实现动画效果呢?其实 Vue 提供了很多动画钩子,入场动画钩子函数有before-enter、enter、after-enter,与入场动画对应的出场动画钩子函数有before-leave、leave、after-leave。它们的用法与入场动画用法一样

超酷的CSS3 loading预加载动画特效

这是一款超酷CSS3 loading预加载动画特效。该loading特效共有4种不同的效果,分别通过不同的CSS3 keyframes帧动画来完成。HTML结构:4种loading预加载动画的HTML结构分别如下

内容以共享、参考为目的,请勿用于商业用途。其版权归原作者所有,如有侵权,请与小编联系,情况属实将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全