css-doodle实现数字矩阵动画效果

代码语言:html

所属分类:动画

代码描述:css-doodle实现数字矩阵动画效果

代码标签: 矩阵 动画 效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

</head>
<body translate="no">
<css-doodle grid="40">
:doodle {
grid-gap: 0px;
width: 2px;
height: 2px;
}
:container {
width:100vw;
height:100vh;
background:#020204;
}
:before{
content:'0';
animation-name: matrixdecode;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease;
color:#22b455;
text-shadow:0 0 2px #22b455;
}
@keyframes matrixdecode {
0%{
content:@round(@rand(0, 9));
opacity:@rand(0.5, 1);.........完整代码请登录后点击上方下载按钮下载查看

网友评论0