html,
body {
height: 100vh;
margin: 0;
padding: 0;
border: 0;
color: #eee;
background-color: #000;
overflow: hidden;
}
body {
display: flex;
align-items: center;
justify-content: center;
align-content: center;
}
.lds-ripple {
display: flex;
position: relative;
width: 300px;
height: 300px;
margin: auto;
}
.lds-ripple div {
position: absolute;
border: 4px solid #fff;
opacity: 1;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
animation-delay: -0.5s;
}
@keyframes lds-ripple {
0% {
top: 150px;
left: 150px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: 0px;
left: 0px;
width: 300px;
height: 300px;
opacity: 0;
}
}
#colorinfo {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align: center;
}
function RandomColor() {
var randomColor = Math.floor(Math.random() * 16777215).toString(16);
document.body.style.backgroundColor = "#" + randomColor + "65";
document.getElementById("colorinfo").innerHTML = randomColor;
}
var interval = setInterval(RandomColor, 500);
setTimeout(function () {
clearInterval(interval);
}, 60000);
//500 değişim sıklığı (yarım saniye)
//60000 toplam çalışacağı süre (1dakika)