Categories
CSS Web development

Storm over the Haunted House?Yes! CSS Rain Animation

It’s pouring out here…but the rainy day do not need to be boring. Let’s have some fun with the Rain!

CSS Haunted House
Do you like this image? Check more images in theĀ store.

We’ll use only pure CSS to create Rain Effect Animation. Follow the steps below and create your own Rain Animation!

*Animation opened in the Safari browser.
To see the live output of the animation click here.

What do you need to do?

You need to have an image of the rain in .png format (you can use also mine below) and then follow the steps below:

  1. Add HTML.
  2. Add CSS.
  3. Add CSS Animation.
rain.png

Step 1.

Add HMTL

<div id="circle">
   <div id="content">
    <div class="bottom"></div>
     <div class="tomb"></div>
     <div class="house"></div>
     <div class="porch"></div>
     <div class="floor1"></div> 
     <div class="floor2"></div>
     <div class="floor3"></div>
     <div class="floor4"></div>
     <div class="door"></div>
     <div class="window1"></div>
     <div class="window2"></div>
     <div class="window3"></div>
     <div class="window4"></div>
     <div class="moon"></div>
     <div class="ghost"></div>
  </div>
  <div class="rain"></div>
</div>

Step 2.

Add CSS

Set the size and position of the background and elements:

body{
   background-color: #6C3483;
   margin:50px;
   height:100vh;
}
#circle {
   background:#212F3C;
   width:450px;
   height:450px;
   border-radius: 50%;
   margin:0 auto;
   position: relative;
   z-index: 1;
   overflow:hidden;
   box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07);
}
.content {
  position:relative;
  
}
CSS Haunted House

Add the house:

}
.bottom {
  position:absolute;
  background-color:black;
  width:450px;
  height:200px;
  top:300px;
  border-radius:50% 50% 0 0;
}
.bottom:after {
  position:absolute;
  content:"";
  background-color:black;
  width:10px;
  height:40px;
  top:-20px;
  left:90px;
  transform:rotate(-10deg);
  
}
.bottom:before {
  position:absolute;
  content:"";
  background-color:black;
  width:30px;
  height:10px;
  left:80px;
  top:-10px;
  transform:rotate(-10deg);
  
}
.house {
  position:absolute; 
  width: 120px;
  height:150px;
  background-color:black;
  left:180px;
  top:160px;
  transform:rotate(5deg);
}
.house:after {
  content:"";
  position:absolute;
  width: 0;
  height: 0;
  border-bottom: 30px solid black;
  border-right: 50px solid transparent;
  left:115px;
  top:70px;
  transform:rotate(5deg);
}
.house:before {
  content:"";
  position:absolute;
  width:7px;
  height:65px;
  background-color:black;
  left:140px;
  top:95px;
  
}
.porch {
  position: absolute;
  width:30px;
  height:60px;
  background-color:black;
  left:160px;
  top:250px;
  transform:rotate(-5deg);
}
.porch:after {
  content:"";
  position:absolute;
  width: 0;
  height: 0;
  border-bottom: 20px solid black;
  border-left: 40px solid transparent;
  left:-35px;
  top:-1px;
}

.porch:before {
  content:"";
  position:absolute;
  width:7px;
  height:45px;
  background-color:black;
  left:-24px;
  top:18px;
  transform:rotate(-5deg);
}

.floor1 {
  position:absolute;
  background-color:black;
  width:30px;
  height:40px;
  top:211px;
  left:156px;
  transform:rotate(-5deg);
}
.floor1:after {
  content:"";
  position:absolute;
   width: 0;
   height: 0;
   border-left: 20px solid transparent;
   border-right: 20px solid transparent;
   border-bottom: 30px solid black;
   top:-28px;
  left:-5px;
}
.floor1:before {
  content:"";
  position:absolute;
  width:5px;
  height:15px;
  background-color:black;
  top:-19px;
  transform:rotate(-10deg);
}
.tomb {
  position:absolute; 
  background-color:black;
  width:30px;
  height:50px;
  border-radius:50%;
  left:50px;
  top:300px;
  transform:rotate(-10deg);
  
}
.tomb:after {
  content:"";
  position:absolute; 
  background-color:black;
  width:30px;
  height:10px;
  left:0;
  top:-15px;
    
}
.tomb:before {
  content:"";
  position:absolute; 
  background-color:black;
  width:10px;
  height:30px;
  top:-22px;
  left:10px;
  
}

.floor2 {
  position:absolute; 
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 30px solid black;
  left:280px;
  top:140px;
   
}
.floor2:after {
  content:"";
  position:absolute;
  width:5px;
  height:20px;
  background-color:black;
  left:10px;
  top:10px;
  transform:rotate(10deg);
  
}
.floor2:before {
  content:"";
  position:absolute; 
  width:40px;
  height:80px;
  background-color:black;
  left:-50px;
  top:-40px;
  transform:rotate(5deg);
}

.floor3 {
  position:absolute; 
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 30px solid black;
  top:75px;
  left:251px;
  transform:rotate(10deg);  
}
.floor3:after {
  content:"";
  position:absolute;
  width:5px;
  height:20px;
  background-color:black;
  left:10px;
  top:5px;
  
}
.floor3:before {
  content:"";
  position:absolute;
  background-color:black;
  width:80px;
  height:80px;
  transform:rotate(-15deg);  
  left:-90px;
  top:60px;
  
}
.floor4 {
  position:absolute; 
  width: 0;
  height: 0;
  border-left: 47px solid transparent;
  border-right: 47px solid transparent;
  border-bottom: 50px solid black;
  left:158px;
  top:77px;
  transform:rotate(-7deg);
}
.floor4:after {
  content:"";
  position:absolute; 
  width:10px;
  height:20px;
  background-color:black;
  left:-35px;
  top:20px;
  transform:rotate(-7deg);
}
.bottom {
  position:absolute;
  background-color:black;
  width:450px;
  height:200px;
  top:300px;
  border-radius:50% 50% 0 0;
}
.bottom:after {
  position:absolute;
  content:"";
  background-color:black;
  width:10px;
  height:40px;
  top:-20px;
  left:90px;
  transform:rotate(-10deg);
  
}
.bottom:before {
  position:absolute;
  content:"";
  background-color:black;
  width:30px;
  height:10px;
  left:80px;
  top:-10px;
  transform:rotate(-10deg);
  
}
.house {
  position:absolute; 
  width: 120px;
  height:150px;
  background-color:black;
  left:180px;
  top:160px;
  transform:rotate(5deg);
}
.house:after {
  content:"";
  position:absolute;
  width: 0;
  height: 0;
  border-bottom: 30px solid black;
  border-right: 50px solid transparent;
  left:115px;
  top:70px;
  transform:rotate(5deg);
}
.house:before {
  content:"";
  position:absolute;
  width:7px;
  height:65px;
  background-color:black;
  left:140px;
  top:95px;
  
}
.porch {
  position: absolute;
  width:30px;
  height:60px;
  background-color:black;
  left:160px;
  top:250px;
  transform:rotate(-5deg);
}
.porch:after {
  content:"";
  position:absolute;
  width: 0;
  height: 0;
  border-bottom: 20px solid black;
  border-left: 40px solid transparent;
  left:-35px;
  top:-1px;
}

.porch:before {
  content:"";
  position:absolute;
  width:7px;
  height:45px;
  background-color:black;
  left:-24px;
  top:18px;
  transform:rotate(-5deg);
}

.floor1 {
  position:absolute;
  background-color:black;
  width:30px;
  height:40px;
  top:211px;
  left:156px;
  transform:rotate(-5deg);
}
.floor1:after {
  content:"";
  position:absolute;
   width: 0;
   height: 0;
   border-left: 20px solid transparent;
   border-right: 20px solid transparent;
   border-bottom: 30px solid black;
   top:-28px;
  left:-5px;
}
.floor1:before {
  content:"";
  position:absolute;
  width:5px;
  height:15px;
  background-color:black;
  top:-19px;
  transform:rotate(-10deg);
}
.tomb {
  position:absolute; 
  background-color:black;
  width:30px;
  height:50px;
  border-radius:50%;
  left:50px;
  top:300px;
  transform:rotate(-10deg);
  
}
.tomb:after {
  content:"";
  position:absolute; 
  background-color:black;
  width:30px;
  height:10px;
  left:0;
  top:-15px;
    
}
.tomb:before {
  content:"";
  position:absolute; 
  background-color:black;
  width:10px;
  height:30px;
  top:-22px;
  left:10px;
  
}

.floor2 {
  position:absolute; 
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 30px solid black;
  left:280px;
  top:140px;
   
}
.floor2:after {
  content:"";
  position:absolute;
  width:5px;
  height:20px;
  background-color:black;
  left:10px;
  top:10px;
  transform:rotate(10deg);
  
}
.floor2:before {
  content:"";
  position:absolute; 
  width:40px;
  height:80px;
  background-color:black;
  left:-50px;
  top:-40px;
  transform:rotate(5deg);
}

.floor3 {
  position:absolute; 
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 30px solid black;
  top:75px;
  left:251px;
  transform:rotate(10deg);  
}
.floor3:after {
  content:"";
  position:absolute;
  width:5px;
  height:20px;
  background-color:black;
  left:10px;
  top:5px;
  
}
.floor3:before {
  content:"";
  position:absolute;
  background-color:black;
  width:80px;
  height:80px;
  transform:rotate(-15deg);  
  left:-90px;
  top:60px;
  
}
.floor4 {
  position:absolute; 
  width: 0;
  height: 0;
  border-left: 47px solid transparent;
  border-right: 47px solid transparent;
  border-bottom: 50px solid black;
  left:158px;
  top:77px;
  transform:rotate(-7deg);
}
.floor4:after {
  content:"";
  position:absolute; 
  width:10px;
  height:20px;
  background-color:black;
  left:-35px;
  top:20px;
  transform:rotate(-7deg);
}
.floor4:before {
  content:"";
  position:absolute; 
  background-color:#F1C40F;
  width:15px;
  height:30px;
  border-radius:30px 30px 0 0;
  left:57px;
  top:35px;
  transform:rotate(13deg);
  box-shadow:inset -5px 5px 0 rgba(0,0,0,0.09);
}
CSS Haunted House

Add windows and door:

.door {
  position:absolute; 
  background-color: #F1C40F;
  width:38px;
  height:60px;
  border-radius:30px 30px 0 0;
  left:210px;
  top:245px;
  box-shadow:inset -15px 5px 0 rgba(0,0,0,0.09);
  
}
.door:after {
  content:"";
  position:absolute; 
  background-color: #F1C40F;
  box-shadow:inset -5px 5px 0 rgba(0,0,0,0.09);
  width:20px;
  height:35px;
  left:-35px;
  border-radius:30px 30px 0 0;
  transform:rotate(-2deg);
}
.door:before {
  content:"";
  position:absolute; 
  background-color: #F1C40F;
  box-shadow:inset -5px 5px 0 rgba(0,0,0,0.09);
  width:20px;
  height:35px;
  left:53px;
  border-radius:30px 30px 0 0;
  transform:rotate(2deg);
}
.window1 {
  position:absolute;
  background-color: #F1C40F;
  box-shadow:inset -5px 5px 0 rgba(0,0,0,0.09);
  width:30px;
  height:40px;
  border-radius:30px 30px 0 0;
  transform:rotate(-4deg);
  top:125px;
  left:195px;
}
.window1:after {
  content:"";
  position:absolute;
  width:3px;
  height:42px;
  background-color:black;
  left:13px;
}
.window1:before {
  content:"";
  position:absolute;
  background-color:black;
  height:3px;
  width:30px;
  top:20px;
}
.window2 {
  position:absolute; 
  width:3px;
  height:35px;
  background-color: black;
  top:100px;
  left:270px;
  transform:rotate(6deg);
}
.window2:after {
  content:"";
  background-color: black;
  height:3px;
  width:30px;
  position:absolute;
  top:20px;
  left:-10px;
  
}
.window2:before {
  content:"";
  background-color:black;
  position:absolute;
  width:3px;
  height:37px;
  top:144px;
  left:16px;
  transform:rotate(-3deg);
}
.window3 {
  position:absolute;
  height:3px;
  width:30px;
  background-color:black;
  left:260px;
  top:265px;
}
.window3:after {
  content:"";
  position:absolute;
  height:3px;
  width:30px;
  background-color:black;
  left:-90px;
  
}
.window3:before {
  content:"";
  position:absolute;
  background-color:black;
  width:3px;
  height:35px;
  left:-77px;
  top:-20px;
}
.window4 {
  position:absolute;
  background-color: #F1C40F;
  box-shadow:inset -5px 5px 0 rgba(0,0,0,0.09);
  width:10px;
  height:20px;
  border-radius:30px 30px 0 0; 
  top:210px;
  left:165px;
  transform:rotate(-7deg);
    
}
.window4:after {
  content:"";
  position:absolute;
  background-color: #F1C40F;
  box-shadow:inset -5px 5px 0 rgba(0,0,0,0.09);
  width:10px;
  height:20px;
  border-radius:30px 30px 0 0; 
  left:65px;
  transform:rotate(7deg);
}
.window4:before {
  content:"";
  position:absolute;
  background-color: #F1C40F;
  box-shadow:inset -5px 5px 0 rgba(0,0,0,0.09);
  width:10px;
  height:20px;
  border-radius:30px 30px 0 0; 
  left:125px;
  top:-20px;
  transform:rotate(13deg);
  
}
CSS Haunted House

Moon:

.moon {
  position:absolute;
  width:200px;
  height:200px;
  border-radius:50%;
  background-color: #95A5A6;
  z-index:-7;
  left:80px;
  top:40px;
  box-shadow:inset 7px -7px 0 rgba(0,0,0,0.09);
}
.moon:after {
  content:"";
  position:absolute;
  border-radius:50%;
  background-color:rgba(0,0,0,0.09);
  box-shadow:inset -5px 5px 0 rgba(0,0,0,0.09);
  width:40px;
  height:40px;
  top:100px;
  left:30px;
}
.moon:before {
  content:"";
  position:absolute;
  border-radius:50%;
  background-color:rgba(0,0,0,0.09);
  box-shadow:inset -5px 5px 0 rgba(0,0,0,0.09);
  width:30px;
  height:30px;
  top:50px;
  left:45px;
}
CSS Haunted House - Moon

and the rain:

.rain {
z-index:100;
height: 100vh;
background: url(https://lenadesign.org/wp-content/uploads/2020/01/rain.png?w=480);
animation: rain 2s linear infinite;
}

.rain:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #fff;
opacity: 0; 
animation: lighting 3s linear infinite;
}
CSS Rain

Step 3.

Add CSS Animation

Let it rain! Add some movements and lighting.

@keyframes rain {
0% {background-position: 0% 0%;}
100% {background-position: 20% 100%;}
}

@keyframes lighting {
0% {opacity: 0;}
10% {opacity: 0;}
11% {opacity: 1;}
14% {opacity: 0;}
20% {opacity: 0;}
21% {opacity: 1;}
24% {opacity: 0;}
104% {opacity: 0;}
}

To see the live output go to: lenastanley.com

Enjoy coding!

Leave a Reply