基努·里维斯、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组件，和这一版风格不同，下次有机会写给大家，先行预告。