.code-container {
width: 450px;
max-width: 100%;
padding: 10px 10px 10px 0px;
box-shadow: 0px 0px 10px #0000000d;
border-radius: 10px;
height: 400px;
overflow:hidden;
position: relative;
}
.stairs {
width: 200px;
height: 20px;
background: #b7b7b7;
border-radius: 0 5px 5px 0;
transform: rotate(3deg);
transform-origin: left;
}
.balls {
margin-top: 70px;
display: flex;
column-gap: 3px;
}
span.ball {
display: inline-block;
width: 30px;
height: 30px;
background: #e13939;
border-radius: 50%;
transition-duration: 0.6s;
transition-delay: 0.2s;
animation: fall 4s forwards cubic-bezier(0.4, 0, 1, 1);
position: absolute;
}
@keyframes fall{
0%{transform:translateY(-150px)}
20%{transform:translateY(-30px)}
50%{transform:translateY(-20px) translateX(160px)}
60%{transform:translateY(-20px) translateX(190px)}
70%{transform:translateY(-20px) translateX(210px)}
75%{transform:translateY(0px) translateX(240px)}
100%{transform:translateY(350px) translateX(300px)}
}
//Add new ball
var colorArray = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
'#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
'#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A',
'#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
'#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC',
'#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
'#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680',
'#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
'#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3',
'#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF'];
setInterval(function(){
var selectedColor = Math.floor(Math.random() * colorArray.length)
var newBall = '<span class="ball" style="background:'+colorArray[selectedColor]+'"></span>';
document.querySelector(".balls").insertAdjacentHTML('afterbegin', newBall)
},1000);
setTimeout(function(){
setInterval(function(){
let totalBalls = document.getElementsByClassName("ball").length
document.getElementsByClassName("ball")[totalBalls-1].remove()
},1000);
},5000);