css实现黑客帝国中的文字矩阵雨动画效果代码-html代码-BFW代码库

css实现黑客帝国中的文字矩阵雨动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现黑客帝国中的文字矩阵雨动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
*, *:before, *:after {
  box-sizing: inherit;
}
* {margin:0;padding:0;border:0 none; position: relative;}
html {
  background: #000;
  height: 100vh;
  box-sizing: border-box;
}
article { 
  display: flex;
  justify-content: space-around;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top:0; left:0;
  overflow: hidden;
  -webkit-animation: blur 11s infinite;
          animation: blur 11s infinite;
}
@-webkit-keyframes blur {
  23% {filter: url(#none);}
  24% {filter: url(#svg-blur-h);}
  25% {filter: url(#none);}
  26% {filter: url(#svg-blur-h);}
  27% {filter: url(#none);}
  28% {filter: url(#svg-blur-h);}
  35% {filter: url(#none);}
  80% {filter: url(#none);}
  81% {filter: url(#svg-blur-v);}
  87% {filter: url(#none);}
  88% {filter: url(#svg-blur-v);}
  89% {filter: url(#none);}
}
@keyframes blur {
  23% {filter: url(#none);}
  24% {filter: url(#svg-blur-h);}
  25% {filter: url(#none);}
  26% {filter: url(#svg-blur-h);}
  27% {filter: url(#none);}
  28% {filter: url(#svg-blur-h);}
  35% {filter: url(#none);}
  80% {filter: url(#none);}
  81% {filter: url(#svg-blur-v);}
  87% {filter: url(#none);}
  88% {filter: url(#svg-blur-v);}
  89% {filter: url(#none);}
}
pre {
  color: #80FF00;
  text-shadow: 0 0 2px #60F000, 1px -1px 2px #60F000;
  font-weight: 400;
  font-size: 1.5rem;
  text-decoration: none;
  letter-spacing: .3rem;
  word-spacing: 1rem;
  padding: 1rem 0;
  -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
  -webkit-text-orientation: upright;
  -moz-text-orientation: upright;
 text-orientation: upright;
  transform: translatey(-100%);
  -webkit-animation: matrix linear 30s infinite;
          animation: matrix lin.........完整代码请登录后点击上方下载按钮下载查看