Background Effects with html, css, javascript .....Just amazing experience. to run this code in your Desktop or Laptop . open the any code editor to run this code. And if you want to learn like this new something.please stay with " Code Zoone" blogsite
Copy the below HTML code
HTML
<html lang="en">
<head>
</head>
<body>
<script>
function lines() {
let sizeW = Math.random() * 22;
let duration = Math.random() * 3;
let e = document.createElement("div");
e.setAttribute("class", "circle");
document.body.appendChild(e);
e.style.width = 12 + sizeW + "px";
e.style.left = Math.random() * +innerWidth + "px";
e.style.animationDuration = 2 + duration + "s";
setTimeout(function () {
document.body.removeChild(e);
}, 5000);
}
setInterval(function () {
lines();
}, 200);
</script>
</body>
</html>
Copy the below CSS code
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: #001219;
overflow: hidden;
}
.circle {
position: absolute;
bottom: 0;
width: 20px;
aspect-ratio: 1/1;
background: #fca311;
box-shadow: 0 0 10px #ff5400, 0 0 20px #ff5400, 0 0 30px #ff5400,
0 0 50px #ff5400;
border-radius: 50%;
animation: animate 5s linear forwards;
}
@keyframes animate {
0% {
transform: translatey(0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translatey(-100vh);
opacity: 1;
}
}
.circle::before {
content: "";
position: absolute;
bottom: 100%;
left: 25%;
width: 50%;
height: 100vh;
opacity: 0.5s;
background: linear-gradient(#ff5400, transparent);
}
