CSS Falls from the Sky
CSS Falls from the Sky
In web design, CSS (Cascading Style Sheets) is a language used to control the style and layout of web pages. Through CSS, we can achieve a variety of effects, such as changing text color, adjusting element position, setting background https://coder-cafe.com/wp-content/uploads/2025/09/images, etc. This article will introduce some interesting CSS techniques, which will make CSS fall from the sky like raindrops, adding some special effects to your web pages.
1. Use CSS animation to create a rain effect
The following is a simple sample code that implements a rain animation effect:
<!DOCTYPE html>
<html Tutorial">html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rain Animation</title>
<style>
body {
background-color: #000;
overflow: hidden;
}
.raindrop {
position: absolute;
width: 2px;
height: 10px;
background-color: #00f;
animation: rain 0.5s linear infinite;
}
@keyframes rain {
0% {
transform: translateY(-10px);
}
100% {
transform: translateY(100vh);
}
}
</style>
</head>
<body>
<script>
for (let i = 0; i < 100; i++) {
let raindrop = document.createElement('div');
raindrop.className = 'raindrop';
raindrop.style.left = Math.random() * window.innerWidth + 'px';
raindrop.style.animationDuration = Math.random() * 0.5 + 0.2 + 's';
document.body.appendChild(raindrop);
}
</script>
</body>
</html>
In this example, we use CSS animation to create a rain effect. We define a rain animation using @keyframes to make raindrops fall from top to bottom. We then dynamically create 100 raindrop elements using JavaScript, each with a random position and animation duration, to create the rain effect.
2. Creating a Lightning Effect with CSS
Below is a sample code that implements a lightning animation effect:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lightning Animation</title>
<style>
body {
background-color: #000;
overflow: hidden;
}
.lightning {
position: absolute;
width: 2px;
height: 100vh;
background-color: #fff;
animation: lightning 0.1s linear infinite;
}
@keyframes lightning {
0%, 50%, 100% {
opacity: 0;
}
25%, 75% {
opacity: 1;
}
}
</style>
</head>
<body>
<script>
setInterval(() => {
let lightning = document.createElement('div');
lightning.className = 'lightning';
lightning.style.left = Math.random() * window.innerWidth + 'px';
document.body.appendChild(lightning);
setTimeout(() => {
lightning.remove();
}, 100);
}, 2000);
</script>
</body>
</html>
In this example, we use CSS animation to create a lightning effect. Using @keyframes, we define a lightning animation that displays and hides lightning at different time intervals, creating a lightning effect. JavaScript is then used to create lightning elements at regular intervals and remove them after a certain period of time, creating a continuous lightning effect.
3. Create a Rainbow Effect Using CSS
Below is a sample code that implements a rainbow animation effect:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rainbow Animation</title>
<style>
body {
background-color: #000;
overflow: hidden;
}
.rainbow {
position: absolute;
width: 100px;
height: 100px;
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
border-radius: 50%;
animation: rainbow 5s linear infinite;
}
@keyframes rainbow {
0% {
transform: translateY(-100px);
}
100% {
transform: translateY(100vh);
}
}
</style>
</head>
<body>
<script>
setInterval(() => {
let rainbow = document.createElement('div');
rainbow.className = 'rainbow';
rainbow.style.left = Math.random() * window.innerWidth + 'px';
document.body.appendChild(rainbow);
setTimeout(() => {
rainbow.remove();
}, 5000);
}, 1000);
</script>
</body>
</html>
In this example, we use CSS animation to create a rainbow effect. We define a rainbow animation using @keyframes to make the rainbow move from top to bottom. We then use JavaScript to create a rainbow element at a fixed time and remove it after a certain period of time, creating a continuous rainbow effect.
4. Using CSS to Create Snowflake Effects
Below is a sample code that implements a snowflake animation effect:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snow Animation</title>
<style>
body {
background-color: #000;
overflow: hidden;
}
.snowflake {
position: absolute;
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
animation: snow 5s linear infinite;
}
@keyframes snow {
0% {
transform: translateY(-10px) rotate(0deg);
}
100% {
transform: translateY(100vh) rotate(360deg);
}
}
</style>
</head>
<body>
<script>
for (let i = 0; i < 100; i++) {
let snowflake = document.createElement('div');
snowflake.className = 'snowflake';
snowflake.style.left = Math.random() * window.innerWidth + 'px';
snowflake.style.animationDuration = Math.random() * 5 + 2 + 's';
document.body.appendChild(snowflake); }
</script>
</body>
</html>
In this example, we use CSS animation to create a snowflake effect. We define a snow animation using @keyframes to make snowflakes fall and rotate. We then dynamically create 100 snowflake elements using JavaScript, each with a random position and animation duration, creating the effect of falling snowflakes.
5. Using CSS to Create a Shooting Star Effect
Below is a sample code that implements a shooting star animation effect:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shooting Star Animation</title>
<style>
body {
background-color: #000;
overflow: hidden;
}
.shooting-star {
position: absolute;
width: 20px;
height: 2px;
background-color: #fff;
animation: shooting-star 2s linear infinite;
}
@keyframes shooting-star {
0% {
transform: translateX(-20px);
opacity: 1;
}
100% {
transform: translateX(100vw); opacity: 0;
}
}
</style>
</head>
<body>
<script>
setInterval(() => {
let shootingStar = document.createElement('div');
shootingStar.className = 'shooting-star';
shootingStar.style.top = Math.random() * window.innerHeight + 'px';
document.body.appendChild(shootingStar);
setTimeout(() => {
shootingStar.remove();
}, 2000);
}, 5000);
</script>
</body>
</html>
In this example, we use CSS animation to create a shooting star effect. We define a shooting-star animation using @keyframes to make the shooting star fly from left to right and gradually disappear. Then, the meteor element is created periodically through JavaScript and removed after a period of time, achieving the effect of continuous appearance of meteors.
6. Using CSS to Create a Flame Effect
Below is a sample code that implements a flame animation effect:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fire Animation</title>
<style>
body {
background-color: #000;
overflow: hidden;
}
.fire {
position: absolute;
width: 10px;
height: 10px;
background-color: #f00;
border-radius: 50%;
animation: fire 0.5s linear infinite alternate;
}
@keyframes fire {
0% {
transform: scale(1);
}
100% {
transform: scale(1.5);
}
}
</style>
</head>
<body>
<script>
setInterval(() => {
let fire = document.createElement('div');
fire.className = 'fire';
fire.style.left = Math.random() * window.innerWidth + 'px';
fire.style.bottom = Math.random() * 100 + 'px';
document.body.appendChild(fire);
}, 100);
</script>
</body>
</html>
In this example, we use CSS animation to create a fire effect. A fire animation is defined using @keyframes to alternate between expanding and contracting the flames. JavaScript is then used to create flame elements at regular intervals, with each flame’s position and size randomized, creating a flickering effect.
7. Create a Smoke Effect Using CSS
Below is a sample code that implements a smoke animation effect:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smoke Animation</title>
<style>
body {
background-color: #000;
overflow: hidden;
}
.smoke {
position: absolute;
width: 20px;
height: 20px;
background-color: #ccc;
border-radius: 50%;
opacity: 0;
animation: smoke 2s linear infinite;
}
@keyframes smoke {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
</style>
</head>
<body>
<script>
setInterval(() => {
let smoke = document.createElement('div');
smoke.className = 'smoke';
smoke.style.left = Math.random() * window.innerWidth + 'px';
smoke.style.bottom = Math.random() * 100 + 'px';
document.body.appendChild(smoke);
}, 500);
</script>
</body>
</html>
In this example, we use CSS animation to create a smoke effect. We define a smoke animation using @keyframes to alternate between expanding and fading. We then use JavaScript to create smoke elements at regular intervals, with each smoke element’s position and size randomized, creating a smoky effect.
8. Use CSS to create a starry sky effect
The following is a sample code that implements a starry sky animation effect:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Star Animation</title>
<style>
body {
background-color: #000;
overflow: hidden;
}
.star {
position: absolute;
width: 2px;
height: 2px;
background-color: #fff;
border-radius: 50%;
animation: star 5s linear infinite;
}
@keyframes star {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<script>
for (let i = 0; i < 100; i++) {
let star = document.createElement('div');
star.className = 'star';
star.style.left = Math.random() * window.innerWidth + 'px';
star.style.top = Math.random() * window.innerHeight + 'px';
document.body.appendChild(star);
}
</script>
</body>
</html>
In this example, we use CSS animation to create a starry sky effect. Using @keyframes, a star animation is defined, alternating between zooming in and out. JavaScript is then used to dynamically create 100 star elements, each with a random position and size, creating a twinkling starry sky effect.