CSS特效之数据雨云效果——震撼啊
先看效果：
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS数据雨云效果</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="cloud">
<h2>Data Clouds Rain</h2>
</div>
</div>
<script>
const randomText = () => {
const text = "!@#$%^&*()_+",
letters = text[Math.floor(Math.random() * text.length)];
return letters;
};
const rain = () => {
const cloud = document.querySelector(".cloud"),
e = document.createElement("div");
e.classList.add("drop");
cloud.appendChild(e);
const left = Math.floor(Math.random() * 290),
size = Math.random() * 1.5,
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(() => {
cloud.removeChild(e);
}, 2000);
};
setInterval(() => {
rain();
}, 20);
</script>
</body>
</html>
CSS代码
@import url("https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,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-color: #000;
}
.container {
position: relative;
top: 100px;
width: 100%;
height: 400px;
display: flex;
justify-content: center;
animation: animateColor 5s linear infinite;
border: 35px solid transparent;
}
@keyframes animateColor {
0% {
filter: hue-rotate(0);
}
100% {
filter: hue-rotate(360deg);
}
}
.container .cloud {
position: relative;
width: 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-color: var(--clr);
}
.container .cloud h2::before {
content: "";
position: absolute;
top: -115px;
left: 50%;
width: 120%;
height: 100px;
border-radius: 100px;
transform: translateX(-50%);
background-color: var(--clr);
}
.container .cloud h2::after {
content: "";
position: absolute;
top: -150px;
left: 25px;
width: 120px;
height: 120px;
border-radius: 50%;
background-color: var(--clr);
box-shadow: 120px -30px 0 40px 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);
}
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 0 var(--clr);
}
}
