效果展示
真实效果极其酷炫，大家可以自行实验测试哦！
源代码
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>追光者♂</title>
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
<style>
body {
overflow: hidden;
height: 100vh;
perspective: 40em;
background: radial-gradient(closest-side, rgba(0, 0, 0, 0.7), #000), url("https://pbs.twimg.com/media/CsjHEVFW8AA7uDs.jpg") 50% no-repeat #000;
background-blend-mode: luminosity;
color: lime;
font: 1.5em/ 2 vt323, monospace;
}
div {
position: absolute;
}
.helix {
top: 50%;
left: 50%;
transform-style: preserve-3d;
}
.col {
transform-style: preserve-3d;
animation: rx 10s linear infinite;
}
.col:nth-child(1) {
left: -30em;
animation-delay: 0s;
}
.col:nth-child(1) :nth-child(1):before {
animation-delay: -1.8s;
}
.col:nth-child(1) :nth-child(2):before {
animation-delay: -1.8s;
}
.col:nth-child(1) :nth-child(3):before {
animation-delay: -1.2s;
}
.col:nth-child(1) :nth-child(4):before {
animation-delay: -1.4s;
}
.col:nth-child(1) :nth-child(5):before {
animation-delay: -1s;
}
.col:nth-child(1) :nth-child(6):before {
animation-delay: -2s;
}
.col:nth-child(1) :nth-child(7):before {
animation-delay: -0.2s;
}
.col:nth-child(1) :nth-child(8):before {
animation-delay: -1.2s;
}
.col:nth-child(2) {
left: -28.5em;
animation-delay: -0.25s;
}
.col:nth-child(2) :nth-child(1):before {
animation-delay: -0.4s;
}
.col:nth-child(2) :nth-child(2):before {
animation-delay: -2s;
}
.col:nth-child(2) :nth-child(3):before {
animation-delay: -1.2s;
}
.col:nth-child(2) :nth-child(4):before {
animation-delay: -2s;
}
.col:nth-child(2) :nth-child(5):before {
animation-delay: -1.2s;
}
.col:nth-child(2) :nth-child(6):before {
animation-delay: -0.2s;
}
.col:nth-child(2) :nth-child(7):before {
animation-delay: -1.8s;
}
.col:nth-child(2) :nth-child(8):before {
animation-delay: -1.8s;
}
.col:nth-child(3)
{
left: -27em;
animation-delay: -0.5s;
}
.col:nth-child(3) :nth-child(1):before {
animation-delay: -1.2s;
}
.col:nth-child(3) :nth-child(2):before {
animation-delay: -2s;
}
.col:nth-child(3) :nth-child(3):before {
animation-delay: -0.8s;
}
.col:nth-child(3) :nth-child(4):before {
animation-delay: -0.2s;
}
.col:nth-child(3) :nth-child(5):before {
animation-delay: -1s;
}
.col:nth-child(3) :nth-child(6):before {
animation-delay: -0.2s;
}
.col:nth-child(3) :nth-child(7):before {
animation-delay: -0.4s;
}
.col:nth-child(3) :nth-child(8):before {
animation-delay: -0.4s;
}
.col:nth-child(4)
{
left: -25.5em;
animation-delay: -0.75s;
}
.col:nth-child(4) :nth-child(1):before {
animation-delay: -1.8s;
}
.col:nth-child(4) :nth-child(2):before {
animation-delay: -1.6s;
}
.col:nth-child(4) :nth-child(3):before {
animation-delay: -1.2s;
}
.col:nth-child(4) :nth-child(4):before {
animation-delay: -0.2s;
}
.col:nth-child(4) :nth-child(5):before {
animation-delay: -0.4s;
}
.col:nth-child(4) :nth-child(6):before {
animation-delay: -1.2s;
}
.col:nth-child(4) :nth-child(7):before {
animation-delay: -0.8s;
}
.col:nth-child(4) :nth-child(8):before {
animation-delay: -0.8s;
}
.col:nth-child(5)
{
left: -24em;
animation-delay: -1s;
}
.col:nth-child(5) :nth-child(1):before {
animation-delay: -0.2s;
}
.col:nth-child(5) :nth-child(2):before {
animation-delay: -0.2s;
}
.col:nth-child(5) :nth-child(3):before {
animation-delay: -1.8s;
}
.col:nth-child(5) :nth-child(4):before {
animation-delay: -1.6s;
}
.col:nth-child(5) :nth-child(5):before {
animation-delay: -0.4s;
}
.col:nth-child(5) :nth-child(6):before {
animation-delay: -1s;
}
.col:nth-child(5) :nth-child(7):before {
animation-delay: -0.8s;
}
.col:nth-child(5) :nth-child(8):before {
animation-delay: -1.2s;
}
.col:nth-child(6)
{
left: -22.5em;
animation-delay: -1.25s;
}
.col:nth-child(6) :nth-child(1):before {
animation-delay: -2s;
}
.col:nth-child(6) :nth-child(2):before {
animation-delay: -0.2s;
}
.col:nth-child(6) :nth-child(3):before {
animation-delay: -0.4s;
}
.col:nth-child(6) :nth-child(4):before {
animation-delay: -1.8s;
}
</body>
</html>
由于同理，故此处省略部分代码...
style.css
body {
overflow: hidden;
height: 100vh;
perspective: 40em;
background: radial-gradient(closest-side, rgba(0, 0, 0, 0.7), #000), url("https://pbs.twimg.com/media/CsjHEVFW8AA7uDs.jpg") 50% no-repeat #000;
background-blend-mode: luminosity;
color: lime;
font: 1.5em/ 2 vt323, monospace;
}
div {
position: absolute;
}
.helix {
top: 50%;
left: 50%;
transform-style: preserve-3d;
}
.col {
transform-style: preserve-3d;
animation: rx 10s linear infinite;
}
.col:nth-child(1) {
left: -30em;
animation-delay: 0s;
}
.col:nth-child(1) :nth-child(1):before {
animation-delay: -1.8s;
}
.col:nth-child(1) :nth-child(2):before {
animation-delay: -1.8s;
}
.col:nth-child(1) :nth-child(3):before {
animation-delay: -1.2s;
}
.col:nth-child(1) :nth-child(4):before {
animation-delay: -1.4s;
}
.col:nth-child(1) :nth-child(5):before {
animation-delay: -1s;
}
.col:nth-child(1) :nth-child(6):before {
animation-delay: -2s;
}
.col:nth-child(1) :nth-child(7):before {
animation-delay: -0.2s;
}
.col:nth-child(1) :nth-child(8):before {
animation-delay: -1.2s;
}
.pos:before {
position: absolute;
left: 0;
width: inherit;
word-spacing: 1em;
animation: switch 2s steps(10) infinite;
content: "0 1 2 3 4 5 6 7 8 9";
}
@keyframes switch {
to {
transform: translateY(-20em);
}
}
同理，为了便于展示，这里也省略部分代码...
完整的代码行数稍多，不便于展示也不便于阅读，所以我将代码行摘了一部分。同时我也把整个的源文件上传到了“资源”中，欢迎喜欢的朋友下载呀！