VERY INTRESTING RAIN WITH THUNDER 😝😝😝
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pure CSS Rain</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="rain"></div>
<div class="lightining"></div>
</body>
</html>
CSS Code
body{
margin: 0;
padding: 0;
background-image: url(https://img1.goodfon.com/wallpaper/nbig/6/be/the-driskill-at-night-austin.jpg);
background-size: center;
}
.rain{
height: 100vh;
background-image: url(https://pngimg.com/uploads/rain/rain_PNG13470.png);
animation: rain 0.3s linear infinite;
}
@keyframes rain{
0%{
background-position: 0% 0%;
}
100%{
background-position: 20% 100%;
}
}
.rain::before{
content: "";
position: absolute;
width: 100%;
height: 100%;
background-image: url(https://freepngimg.com/thumb/light/78374-icon-effect-elements-lightning-free-hq-image.png);
top: -130px;
transform: rotate(180deg);
animation: lightining 4s linear infinite;
opacity: 1;
}
@keyframes lightining{
0%{
opacity: 0;
}
20%{
opacity: 0;
}
21%{
opacity: 0;
}
25%{
opacity: 0;
}
30%{
opacity: 0;
}
31%{
opacity: 1;
}
35%{
opacity: 0;
}
100%{
opacity: 0;
}
}
Output Screen
Posts
35 Comments
Wonderful
ReplyDeleteWonderful
ReplyDeleteInteresting
ReplyDeleteAwesome
ReplyDeletePerfect
ReplyDeletePerfect
ReplyDeleteLovely
ReplyDeleteBrilliant
ReplyDeletePerfect
ReplyDeleteExcellent
ReplyDeleteSuperb Work
ReplyDeleteWow Awesome
ReplyDeletePerfect
ReplyDeleteExcellent
ReplyDeletePerfect
ReplyDeleteBrilliant
ReplyDeletePerfect
ReplyDeleteNice Rain
ReplyDeleteWonderful Rain
ReplyDeleteExcExcellent
ReplyDeleteBrilliant
ReplyDeletePerfect
ReplyDeleteKallu
ReplyDeleteExcellent
Lovely
ReplyDeleteExcellent & Brilliant
ReplyDeleteWaw👌👌
ReplyDeletePerfect
ReplyDelete&
Wonderful
Wonderful
ReplyDeleteAwesome
ReplyDeleteperfect
ReplyDeleteWonderful
ReplyDeleteAmazing
ReplyDeleteAwesome
ReplyDeleteInteresting
ReplyDeleteAmazing
ReplyDelete