CSS-raindrop

r/css • u/nahisunra • 14h ago can some one help me with this assignment

 u/otromasquedibuja 4h ago



1- Make a grid of divs. Each div with: background: var(--color);
2- Make a second grid on top of this one. Each div with: background:black;
3- Make classes for 100%, 80%, 60%, 40%, 20%, 0%.
4- Change div classes with js at every column randomly, following the pattern of opacity. Also change colors of var

    2
    u/Time_Split1303 2h ago

    Add animation and keyframes for each div cell so that you smooth out the color transition and back to standard. (Ease-in-ease-out)

my-css

.raindrop {
  animation:fall 2.3s linear;
/*   2s */
  background-color:navy!important;;#000c;
  height:32px;150px;opacity: .7;1;.3;
  position:absolute;
  top:-150px;border-radius: 1in;1cm;
  width:30px;
  z-index:1
}

.cell {
	background-color:transparent; #c2e0e3;
	height: 30px;
/*   background-image: linear-gradient(to bottom, dodgerblue, transparent); */
	width: 30px;
}
.grid{background-image: linear-gradient(to bottom, dodgerblue 0%, transparent 45%); }
@keyframes fall {
  to {
    top:calc(100% + 30px);opacity: 0;
  }
}

@keyframes vapour {
  to {
    opacity: 0;
  }
}

< style> /**/

.raindrop {
  animation:fall 2.3s linear;
/*   2s */
  background-color:navy!important;;#000c;
  height:32px;150px;opacity: .7;1;.3;
  position:absolute;
  top:-150px;border-radius: 1in;1cm;
  width:30px;
  z-index:1
}

.cell {
	background-color:transparent; #c2e0e3;
	height: 30px;
/*   background-image: linear-gradient(to bottom, dodgerblue, transparent); */
	width: 30px;
}
.grid{background-image: linear-gradient(to bottom, dodgerblue 0%, transparent 45%); }
@keyframes fall {
  to {
    top:calc(100% + 30px);opacity: 0;
  }
}

@keyframes vapour {
  to {
    opacity: 0;
  }
}