CSS Window Rain (Blind Open/Close) Animation

Demo:

To create the CSS Window Rain (Blind Open/Close) animation follow the steps below and watch the video tutorial.

1. Add HTML
2. Add CSS

Step1.

Add HTML

<div class="window">
  <div class="content">
    <div class="shine"></div>
    <div class="rain">
      <div class="dropletOne"></div>
      <div class="dropletTwo"></div>
      <div class="dropletThree"></div>
      <div class="dropletFour"></div>
      <div class="dropletFive"></div>
    </div>
  </div>
   <input id='blind' type='checkbox'>
    <label class='blind' for='blind'></label>
  <div class="roll"></div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #5c6b73;
}

.window {
  position: relative;
}

Add the city view:

.content {
  position: relative;
  background-color: #253237;
  width: 270px;
  height: 320px;
  overflow: hidden;
  border:10px solid #fff;
}

.content:before {
  content:"";
  position: absolute;
  width: 60px;
  height: 100px;
  background-color: #242423;
  top:240px;
  box-shadow: 30px 30px #242423, 70px -15px #242423, 130px 20px #242423, 180px -5px #242423,240px 40px #242423, 220px -40px #333533,170px -20px #333533, 130px 10px #333533,90px -10px #333533,40px -30px #333533,10px -5px #333533;
}

.content:after {
  position: absolute;
  content:"";
  background-color: #b69121;
  width:10px;
  height:15px;
  top:250px;
  left:10px;
  box-shadow: 17px 0 #926c15, 34px 0 #805b10, 85px -15px #926c15, 103px -15px #b69121, 155px 15px #805b10, 175px -10px #926c15,190px -10px #b69121, 240px -40px #76520e, 40px -35px #76520e;
}

Add the rain:

.rain {
  position: absolute;
}

.rain:before {
  position: absolute;
  content:"";
  width:270px;
  height:10px;
  background-color: #fff;
  top:160px;
}

.rain:after {
  position: absolute;
  content:"";
  border-radius: 20px 20px 0 0;
  width:30px;
  height: 5px;
  background-color: #b2b2b2;
  top:155px;
  left:120px;
}

.dropletOne, .dropletTwo, .dropletThree, .dropletFour, .dropletFive {
  position: absolute;
  background-color: #fff;
  height: 15px;
  width: 1px;
  transform: rotate(25deg);
  box-shadow: -50px -50px #fff, 50px -270px #fff, 60px -100px #fff,-40px -130px #fff, -80px -250px #fff;
}

.dropletOne {
  left:200px;
  animation: rain 1.3s linear infinite;
}

.dropletTwo {
  top:-20px;
  left:100px;
  animation: rain .8s linear infinite .5s;
}

.dropletThree  {
  top:-50px;
  left:50px;
  animation: rain 1.2s linear infinite 1s;
}

.dropletFour {
  top:-70px;
  left:150px;
  animation: rain 1s linear infinite 1.3s;
}

.dropletFive {
  top:-50px;
  left:230px;
  animation: rain 1.1s linear infinite 1.7s;
}

Animate the rain:

@keyframes rain {
  0% {
    opacity: 0.9;
    top: -100px;
    transform: rotate(25deg) translateX(0);
  }
  100% {
    opacity: 0;
    top: 600px;
    transform: rotate(25deg) translateX(-150px);;
  }
}

Style the rest of the window:

.shine {
  position: absolute;
  background-color: rgba(255,255,255,0.03);
  width:70px;
  height:290px;
  top:40px;
  left:20px;
  transform: skew(-30deg);
  box-shadow: 190px 0 rgba(255,255,255,0.03);
}
.roll {
  position: absolute;
  z-index:10;
  background-color: #333;
  width: 320px;
  height: 15px;
  border-radius:20px 20px 0 0;
  left:-15px;
  top:-10px;
}

.roll:before {
  position: absolute;
  width:350px;
  content:"";
  background-color: #fff;
  height:15px;
  left:-15px;
  top:350px;
  box-shadow: 0 10px 10px rgba(0,0,0,0.15);
}

Add the blind:

.blind {
  position: absolute;
  width: 290px;
  height: 50px;
  background-color: #9db4c0;
  left:0;
  top:0;
  z-index:2;
  transition: .5s;
  box-shadow: inset 0 -7px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.15);
}

.blind:before {
  content:"";
  position: absolute;
  background-color: #333;
  width:2px;
  height: 130px;
  top:0;
  left:300px;
}

.blind:after {
  content:"";
  position: absolute;
  width: 10px;
  height:25px;
  border-radius:20px;
  background-color: #333;
  top:130px;
  left:296px;
  cursor: pointer;
}

To animate the blind (open/close on click):

input#blind {
  display: none;
}

#blind:checked + .blind {
  height: 340px;
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Desk Lamp (Switch On/ Off)

CSS Birthday Animation

CSS Cyclist /Bike Animation