Skip to content

Commit 573fb63

Browse files
VaibhavSuryavanshi93VaibhavSuryavanshi93
committed
adding Animated file
1 parent b591985 commit 573fb63

File tree

4 files changed

+160
-0
lines changed

4 files changed

+160
-0
lines changed

‎Animated-rainbow/README.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
### Animated-Rainbow
2+
3+
It's a simple animated Rainbow without using Javascript..
4+
5+
6+
### Used Technologies
7+
* HTML5
8+
* CSS3
9+
10+
11+
12+
#### Steps to Use:
13+
14+
---
15+
16+
- Download or clone the repository
17+
18+
```
19+
git clone https://github.com/VaibhavSuryavanshi93/Web-dev-mini-projects.git
20+
```
21+
22+
- Go to the directory
23+
- Run the Rainbow.html file
24+
25+
26+
## Screenshots
27+
![Rainbow](rainbow.png)
28+
![Default View](rainbow.png)

‎Animated-rainbow/rainbow.css

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
body{
2+
margin: 0;
3+
padding: 0;
4+
background-color: black;
5+
}
6+
7+
.center{
8+
position: absolute;
9+
top: 40%;
10+
left: 50%;
11+
transform: translate(-50%,-50%);
12+
}
13+
14+
ul{
15+
margin: 0;
16+
padding: 0;
17+
position: relative;
18+
width: 400px;
19+
height: 240px;
20+
overflow: hidden;
21+
border-bottom: 1px solid rgba(0,0,0,.2);
22+
}
23+
24+
ul li{
25+
list-style: none;
26+
border-radius: 50%;
27+
border: 15px solid #000;
28+
position: absolute;
29+
top: 100%;
30+
left: 50%;
31+
border-bottom-color: transparent !important;
32+
border-left-color: transparent !important;
33+
box-shadow: 0 0 10px rgba(0,0,0,.5);
34+
animation: animate 5s infinite alternate;
35+
transform: translate(-50%,-50%);
36+
}
37+
38+
.one{
39+
width: 60px;
40+
height: 60px;
41+
border-color:#FF0000;
42+
animation-delay: .2s;
43+
animation-duration: 5s;
44+
animation-name: animate;
45+
}
46+
47+
.two{
48+
width: 90px;
49+
height: 90px;
50+
border-color:#FF7F00;
51+
animation-delay: .4s;
52+
animation-duration: 5s;
53+
animation-name: animate;
54+
}
55+
56+
.three{
57+
width: 120px;
58+
height: 120px;
59+
border-color:#FFFF00;
60+
animation-delay: .6s;
61+
animation-duration: 5s;
62+
animation-name: animate;
63+
}
64+
65+
.four{
66+
width: 150px;
67+
height: 150px;
68+
border-color:#00FF00;
69+
animation-delay: .8s;
70+
animation-duration: 5s;
71+
animation-name: animate;
72+
}
73+
74+
.five{
75+
width: 180px;
76+
height: 180px;
77+
border-color:#0000FF;
78+
animation-delay: 1s;
79+
animation-duration: 5s;
80+
animation-name: animate;
81+
}
82+
83+
.six{
84+
width: 210px;
85+
height: 210px;
86+
border-color:#4B0082;
87+
animation-delay: 1.2s;
88+
animation-duration: 5s;
89+
animation-name: animate;
90+
}
91+
92+
.seven{
93+
width: 240px;
94+
height: 240px;
95+
border-color:#9400D3;
96+
animation-delay: 1.4s;
97+
animation-duration: 5s;
98+
animation-name: animate;
99+
}
100+
101+
@keyframes animate{
102+
0%{
103+
transform: translate(-50%,-50%) rotate(-45deg);
104+
}
105+
106+
100%{
107+
transform: translate(-50%,-50%) rotate(315deg);
108+
}
109+
}

‎Animated-rainbow/rainbow.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<link rel="stylesheet" href="rainbow.css">
9+
</head>
10+
<body>
11+
<div class="center">
12+
<ul>
13+
<li class="one"></li>
14+
<li class="two"></li>
15+
<li class="three"></li>
16+
<li class="four"></li>
17+
<li class="five"></li>
18+
<li class="six"></li>
19+
<li class="seven"></li>
20+
</ul>
21+
</div>
22+
</body>
23+
</html>

‎Animated-rainbow/rainbow.png

17.3 KB
Loading

0 commit comments

Comments
 (0)