写一个代码雨的html页面
<!DOCTYPE html>
<html>
<head>
<title>Code Rain</title>
<style>
body {
background-color: black;
}
.code-rain {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.code-rain span {
position: absolute;
display: block;
width: 10px;
height: 10px;
background-color: green;
font-size: 10px;
line-height: 10px;
animation: drop 0.5s linear infinite;
opacity: 0;
}
@keyframes drop {
from {
transform: translateY(-100%);
}
to {
transform: translateY(100%);
}
}
</style>
</head>
<body>
<div class="code-rain">
<script>
var codeRain = document.querySelector('.code-rain');
var code = 'abcdefghijklmnopqrstuvwxyz0123456789';
code = code.split('');
<pre><code> setInterval(function() {
var span = document.createElement('span');
span.innerText = code[Math.floor(Math.random() * code.length)];
span.style.left = Math.floor(Math.random() * 100) + '%';
codeRain.appendChild(span);
setTimeout(function() {
span.remove();
}, 5000);
}, 50);
</script>
</div>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/bDwb 著作权归作者所有。请勿转载和采集!