矩阵雨（可复制源代码）

七夏（UID：1） · 发表于 2024-11-26 13:23:00

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

×

<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cloud Rain</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
:root {
--clr: #0f0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
transform: scale(0.6);
}
.container {
position: relative;
top: 100px;
height: 400px;
width: 100%;
display: flex;
justify-content: center;
animation: animateColor 5s linear infinite;
}
@keyframes animateColor {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
.container .cloud {
position: relative;
width: 300px;
/* height: 300px; */
z-index: 100;
filter: drop-shadow(0 0 35px var(--clr));
}
.container .cloud h2 {
position: absolute;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
color: #000;
font-size: 2em;
z-index: 1000;
font-weight: 400;
padding: 0 10px;
border-radius: 10px;
text-transform: uppercase;
background: var(--clr);
}
.container .cloud h2::before {
content: "";
position: absolute;
top: -115px;
left: 50%;
transform: translateX(-50%);
border-radius: 100px;
width: 120%;
height: 100px;
background: var(--clr);
}
.container .cloud h2::after {
content: "";
position: absolute;
top: -150px;
left: 25px;
width: 120px;
height: 120px;
border-radius: 50%;
background: var(--clr);
box-shadow: 120px -30px 0 10px var(--clr);
}
.container .cloud .drop {
position: absolute;
top: 60px;
height: 20px;
line-height: 20px;
color: var(--clr);
transform-origin: bottom;
animation: animate 2s linear infinite;
}
@keyframes animate {
0% {
transform: translateY(0) scaleY(0);
transform-origin: top;
}
10% {
transform: translateY(0) scaleY(0.25);
transform-origin: top;
}
20% {
transform: translateY(0) scaleY(1);
/* transform-origin: top; */
}
70% {
transform: translateY(300px) scaleY(1);
transform-origin: bottom;
}
80% {
transform: translateY(300px) scaleY(1);
transform-origin: bottom;
}
100% {
transform: translateY(300px) scaleY(0);
transform-origin: bottom;
text-shadow: -180px 0 0 var(--clr), 180px 0 var(--clr);
}
}
</style>
</head>
<body>
<div class="container">
<div class="cloud">
<h2>Matrix Rain</h2>
</div>
</div>
<script>
function randomText() {
var text = "!@#$%^*()";
letters = text[Math.floor(Math.random() * text.length)];
return letters;
}
function rain() {
let cloud = document.querySelector(".cloud");
let e = document.createElement("div");
e.classList.add("drop");
cloud.appendChild(e);
let left = Math.floor(Math.random() * 300);
let size = Math.random() * 1.5;
let duration = Math.random() * 1;
e.innerText = randomText();
e.style.left = left + "px";
e.style.fontSize = 0.5 + size + "em";
e.style.animationDuration = 1 + duration + "s";
setTimeout(function () {
cloud.removeChild(e);
}, 2000);
}
setInterval(function () {
rain();
}, 20);
</script>
</body>
</html>

复制代码

矩阵雨（可复制源代码）

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子

快速回帖

分享帝

龙年限定

关于楼主

商务推广