基努·里维斯、css-doodle、黑客帝国字幕雨和随机艺术

基努·里维斯是好莱坞的一个明星，我第一次知道他是看《生死时速》，在里面他饰演一个警察，和桑德拉·布洛克合做，这部电影成了他的第一个事业高峰。

css-doodle是一个用CSS绘制图案的Web组件，它基于Shadow DOM v1 和 Custom Elements v1 技术，你能够在最新版本的chrome，firefox和Safari上面使用它。

最近，基努李维斯的狗成为了你们都不敢惹的动物，在《John Wick》系列电影中，为了一条狗，他杀了别人全家，全黑帮，所有的敌人，看了这个系列后，我对狗友善了不少。

css-doodle组件可使用纯css生成一系列的div网格，而且用css来改变这些网格，生成图形图案或动画图形，只要css能作到的，css-doodle都能作到。

1999年开始上映的《黑客帝国》三部曲能够说是科幻电影史上的一座丰碑，基努李维斯饰演的网络黑客更是在电影里面大杀四方，帅气十足，为程序员这个职业非常挣了一回面子（浓密的头发保持至今，使人gang'dong）。

在里面屡屡出现的绿字幕雨更是不少程序员都想在本身的程序中实现的效果，今天咱们就用css-doodle实现一把绿字幕雨效果。

这个效果是由css-doodle做者yuanchuan作的，具体效果你们能够到这里围观，codepen.io

--------------------------------------------我是正式开讲的分割线------------------------------------------------------

第一步，咱们须要引入css-doodle

<script src='https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.7.1/css-doodle.min.js'></script>复制代码

完整的代码请去官网围观

第二步，把背景改为黑色

html, body { 
  height: 100%; 
  margin: 0; 
  background: #000; 
}

body { 
  display: flex; 
  align-items: center; 
  justify-content: center 
}复制代码

第三步，使用css-doodle的自定义组件标签

<css-doodle use="var(--rule)"></css-doodle>复制代码

其中<css-doodle>标签使用的是Shadow DOM v1技术，这个技术之后咱们有机会再说，这里先教你们怎么去看shadow dom，用谷歌浏览器F12打开开发者工具，按F1进入setting界面，勾选show user agent shadow dom。

而后到页面上查看查看元素，就能看到shadow root啦

另外，use是css-doodle自定义的一个属性，若是咱们一个css-doodle有多套配置，能够根据use属性来决定使用哪一套。

第四步，字幕雨魔法开始

<style>
    css-doodle {
      --rule: ( :doodle {
          @grid: 1x100 / 100%;
          overflow: hidden;
        }

        writing-mode: vertical-rl;

        display: block;
        color: #9bff9b;
        filter: @ms2(drop-shadow(0 0 @p(2em, 2px) currentColor));

        
        :after, :before {
          font-size: 10px;
          text-align: right;
          white-space: nowrap;
          display: block;
        }

        :after {
          transform: translate3d(@r(-50%, 50%), @r(-20%, 100%), 0) rotate(180deg);
          mask: linear-gradient(to bottom, #fff 80%, transparent);
          content: @repeat(@ri(15, 50), @p(\@hex(@r(0x3041, 0x30FF)),
              \@hex(@r(0x2000, 0x206f))));
        }

        :first-letter {
          text-shadow: @m2(0 0 10px #fff);
          color: #fff;
        }

        :before {
          content: @repeat80(\@hex(@r(0x2000, 0x206f)));
          animation: rain-back @r(1s,3s) linear infinite both;
          position: absolute;
          transform: translate3d(0, @r(-20%, 100%), 0);
          opacity: @r(.01, .2);
        }
      );
    }
  </style>复制代码

代码量其实不多，咱们同样同样来说解。

css-doodle {
      --rule: ( :doodle {
          @grid: 1x100 / 100%;
          overflow: hidden;
        }
......复制代码

--rule对应的就是标签的rule属性。

:doodle是一个特殊的选择器，表示的是css-doodle自身，它出现就表示咱们要用本身的css来覆盖css-doodle默认的css啦。

@grid表示网格的数量，1表示一行，100表示100列，字幕雨其实就是不少分割的列，一列就是一条字幕。100%表示该网格覆盖整个屏幕，若是小于100%，则从屏幕中央开始，只覆盖相应百分比的屏幕。好比70%，看到的是这样的

咱们略过标准的css属性，看一下这一行

filter: @ms2(drop-shadow(0 0 @p(2em, 2px) currentColor));复制代码

@ms是css-doodle的一个自定义函数，表示屡次执行，2就是执行的次数，在这里，数字越大，drop-shadow的效果就越明显。

@p也是css-doodle的一个自定义函数，表示从()里面逗号分开的几个数中随机取数，这里是为了让不一样的文字有不一样的模糊效果。

而后要分before，after来说，before指的是背景文字，里面不起眼更暗的部分。

为了让你们看清楚，其实我把背景文字的透明度调高了一些。它实际的代码是这样的

:before {
          content: @repeat80(\@hex(@r(0x2000, 0x206f)));
          position: absolute;
          transform: translate3d(0, @r(-20%, 100%), 0);
          opacity: @r(.01, .2);
        }复制代码

@r是@rand函数的简称，表示从范围数字中随机取数，这里就是从0x2000, 0x206f之间取。

@hex是把上面随机取到的16进制数转换成hex格式，前面加上\就转换成一个对应的字符了。

@repeat就是把上面随机出现的文字重复显示在屏幕上，重复的次数就是80。

@r函数无处不在，transform里面控制文字出现的起时位置，opacity里面控制文字的透明度

背景文字弄好了，就要开始弄前面的文字了，咱们看下after的代码

:after {
          transform: translate3d(@r(-50%, 50%), @r(-20%, 100%), 0) rotate(180deg);
          mask: linear-gradient(to bottom, #fff 80%, transparent);
          content: @repeat(@ri(15, 50), @p(\@hex(@r(0x3041, 0x30FF)),
              \@hex(@r(0x2000, 0x206f))));
        }复制代码

方法和before的相似，只是出现的文字限定在日文字范围，比较有科幻的感受，另外文字经过transform的rotate(180deg)让文字倒过来，这样是为了下面这段代码

:first-letter {
          text-shadow: @m2(0 0 10px #fff);
          color: #fff;
        }复制代码

这样，原本应该出如今文本开始的效果就象出如今文字的结尾，效果以下

仔细看能够看到，文字都是倒立的。这样，一个科技感十足的绿幕文字雨就生成了。

----------------------------------------------不作动画效果怎么对得起本身分割线------------------------------------------

css-doodle对css的支持是全方面的，前面提过，css能作到的效果，用到css-doodle都能作到，咱们如今把动画效果加上去，看看css-doodle是否是在吹牛。

@keyframes rain {
          from {
            content: @repeat(@ri(15, 30), @p(\@hex(@r(0x3041, 0x30FF)),
              \@hex(@r(0x2000, 0x206f))));
          }

          to {
            content: @repeat(@ri(31, 70), @p(\@hex(@r(0x3041, 0x30FF)),
              \@hex(@r(0x2000, 0x206f))));
          }
        }复制代码

这是一个经常使用的css animation效果，让after的字幕不断随机变化。

@keyframes rain-back {
          from {
            content:@repeat80(\@hex(@r(0x2000, 0x206f)))
          }

          to {
            content:@repeat80(\@hex(@r(0x2000, 0x206f)));
          }
        }复制代码

一样的效果，这是让背景文字不断随机变化的，而后把这个加到相应的位置

:after {
          transform: translate3d(@r(-50%, 50%), @r(-20%, 100%), 0) rotate(180deg);
          mask: linear-gradient(to bottom, #fff 80%, transparent);
          content: @repeat(@ri(15, 50), @p(\@hex(@r(0x3041, 0x30FF)),
              \@hex(@r(0x2000, 0x206f))));
          animation: rain @r(1s,3s) linear infinite both;
        }

:before {
          content: @repeat80(\@hex(@r(0x2000, 0x206f)));
          animation: rain-back @r(1s,3s) linear infinite both;
          position: absolute;
          transform: translate3d(0, @r(-20%, 100%), 0);
          opacity: @r(.01, .2);
        }复制代码

最后呈现出来的效果是这样的

在线看动态字幕雨请访问codepin.io

----------------------------------------------预告的分割线---------------------------------------------------------

据Discussing Film报道，新版《黑客帝国》电影将于2020年在芝加哥开拍，依旧由沃卓斯基姐妹（？）执导，不知道是神做延续仍是毁经典啦。

其实字幕雨的实现，css-doodle的做者yuanchuan还出过一版动画版的，用的不是css-doodle组件，和这一版风格不一样，下次有机会写给你们，先行预告。