Skip to content

Commit

Permalink
Added cup of rainbow rain animation (#2321)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Dzivmv
Dzivmv committed Oct 23, 2023
1 parent 57ba5a3 commit 3c82f06
Show file tree
Hide file tree
Showing 4 changed files with 338 additions and 0 deletions.
28 changes: 28 additions & 0 deletions Art/Dzivmv/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>Cloud & Rainbow Rain Animation</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="cloud"></div>
<div class="raindots"></div>
<div class="raindots2"></div>
<div class="raindots3"></div>
<div class="raindots4"></div>
<div class="raindots5"></div>
<div class="raindots6"></div>
<div class="raindots7"></div>
<div class="raindots8"></div>
<div class="teacup">
<div class="eye eye-l"></div>
<div class="eye eye-r"></div>
<div class="mouth"></div>
<div class="saucer"></div>
</div>
</div>
</body>
</html>
Binary file added Art/Dzivmv/rainbow_rain.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
303 changes: 303 additions & 0 deletions Art/Dzivmv/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,303 @@
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
display:flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #e8f9fc;
}
.container
{
position: relative;
height: 600px;
}
.cloud
{
position: relative;
top: 50px;
width: 320px;
height: 100px;
background: #4c7fe6;
border-radius: 100px;
}
.cloud::before
{
content: '';
position: absolute;
top: -50px;
left: 40px;
width: 110px;
height: 110px;
background: #4c7fe6;
border-radius: 50%;
box-shadow: 90px 0 0 30px #4c7fe6;
}
.raindots
{
position: relative;
top: 50px;
left: 100px;
width: 20px;
height: 20px;
background: blueviolet;
border-radius: 100%;
animation: animate 5s linear infinite;
}
.raindots::before
{
content: '';
position: relative;
top: -40px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 30px solid blueviolet;
margin: 10px auto 0;
}
.raindots2
{
position: relative;
left: 50px;
top: 50px;
width: 20px;
height: 20px;
background: orangered;
border-radius: 100%;
animation: animate 3s linear infinite;
}
.raindots2::before
{
content: '';
position: relative;
top: -40px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 30px solid orangered;
margin: 10px auto 0;
}
.raindots3
{
position: relative;
left: 80px;
top: 30px;
width: 20px;
height: 20px;
background: yellow;
border-radius: 100%;
animation: animate 2s linear infinite;
}
.raindots3::before
{
content: '';
position: relative;
top: -40px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 30px solid yellow;
margin: 10px auto 0;
}
.raindots4
{
position: relative;
left: 120px;
top: 30px;
width: 20px;
height: 20px;
background: forestgreen;
border-radius: 100%;
animation: animate 2s linear infinite;
}
.raindots4::before
{
content: '';
position: relative;
top: -40px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 30px solid forestgreen;
margin: 10px auto 0;
}
.raindots5
{
position: relative;
left: 250px;
top: 2px;
width: 20px;
height: 20px;
background: royalblue;
border-radius: 100%;
animation: animate 2s linear infinite;
}
.raindots5::before
{
content: '';
position: relative;
top: -40px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 30px solid royalblue;
margin: 10px auto 0;
}
.raindots6
{
position: relative;
left: 150px;
top: -15px;
width: 20px;
height: 20px;
background: red;
border-radius: 100%;
animation: animate 3s linear infinite;
}
.raindots6::before
{
content: '';
position: relative;
top: -40px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 30px solid red;
margin: 10px auto 0;
}
.raindots7
{
position: relative;
left: 180px;
top: -50px;
width: 20px;
height: 20px;
background: orangered;
border-radius: 100%;
animation: animate 4s linear infinite;
}
.raindots7::before
{
content: '';
position: relative;
top: -40px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 30px solid orangered;
margin: 10px auto 0;
}
.raindots8
{
position: relative;
left: 220px;
top: -50px;
width: 20px;
height: 20px;
background: lightblue;
border-radius: 100%;
animation: animate 3s linear infinite;
animation-duration: 10s;
}
.raindots8::before
{
content: '';
position: relative;
top: -40px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 30px solid lightblue;
margin: 10px auto 0;
}
@keyframes animate
{
0%
{
transform: translateY(0) scale(1);
}
70%
{
transform: translateY(300px) scale(1);
}
100%
{
transform: translateY(300px) scale(0);
}
}
.teacup
{
position: relative;
background-color: #ffc994;
top: 220px;
left: 45px;
height: 150px;
width: 230px;
border-radius: 10px 10px 70px 70px;
bottom: 6.25px;
}
.teacup::before
{
position:relative;
content: "";
height: 100px;
width: 100;
border: 50px solid #ffc994;
left: 200px;
bottom: -50px;
border-radius: 50%;
padding-inline: 10px;
}
.eye
{
position: relative;
content: '';
height: 20px;
width: 30px;
background-color: transparent;
border: 5px solid black;
border-radius: 50px 50px 0px 0px;
border-bottom: none;
top: 20px;
}
.eye-l
{
left: 50px;
}
.eye-r
{
left: 120px;
top: -5px;
}
.mouth
{
position: relative;
background-color: coral;
height: 40px;
width: 75px;
border-radius: 20px 20px 80px 80px;
bottom: -5px;
left: 65px;
}
.mouth::before
{
content: "";
position: relative;
background-color: orangered;
height: 20px;
width: 50px;
border-radius: 60px 60px 60px 60px;
bottom: 50px;
}
7 changes: 7 additions & 0 deletions include.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2269,6 +2269,13 @@ let cards = [
imageLink: './Art/Vishalpatilr20/index.png',
author: 'Vishal',
githubLink: 'https://github.com/vishalpatil20'
},
{
artName: 'Cup of Rainbow Rain',
pageLink: './Art/Dzivmv/index.html',
imageLink: './Art/Dzivmv/rainbow_rain.gif',
author: 'Dzivmv',
githubLink: 'https://github.com/Dzivmv'
}
];

Expand Down

0 comments on commit 3c82f06

Please sign in to comment.