admin 管理员组

文章数量: 887031


2024年2月24日发(作者：aspbbs源码)

width: 100%; height: 100%; background: #000; display: flex; overflow: hidden;}.g-container { width: 100vw; display: flex; justify-content: space-between; flex-wrap: nowrap; flex-direction: row; font-family: 'Inconsolata', monospace, sans-serif;}p { position: relative; width: 5vh; height: 100vh; text-align: center; font-size: 5vh; word-break: break-all; white-space: pre-wrap;

&::before, &::after { position: absolute; top: 0; left: 0; right: 0; height: 100%; overflow: hidden; }}@for $i from 0 through $n { $content: randomChars($perColumnNums); $contentNext: randomChars($perColumnNums); $delay: random($n); $randomAnimationTine: #{$animationTime + random(20) / 10 - 1}s;

p:nth-child(#{$i})::before { content: $content; color: rgb(179, 255, 199); text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor; animation: typing-#{$i} $randomAnimationTine steps(20, end) #{$delay * 0.1s * -1} infinite; z-index: 1; } p:nth-child(#{$i})::after { $alpha: random(40) / 100 + 0.6; content: ''; background: linear-gradient(rgba(0, 0, 0, $alpha), rgba(0, 0, 0, $alpha), rgba(0, 0, 0, $alpha), transparent 75%, transparent); background-size: 100% 220%; background-repeat: no-repeat; animation: mask $randomAnimationTine infinite #{($delay - 2) * 0.1s * -1} linear; z-index: 2; } @keyframes typing-#{$i} { 0% { height: 0; } 25% {


本文标签： 源码 作者

版权声明：本文标题：纯CSS实现科技感十足的暗黑字符雨动画 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1708781197h531398.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。