基努·裏維斯、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組件，和這一版風格不一樣，下次有機會寫給你們，先行預告。