Skip to content

Commit 63cfc11

Browse files
Sulagna-Dutta-RoySulagna-Dutta-Roy
authored
Merge pull request #244 from ilhamansari/CSS-ANIMATIONS
Added my css animations website
2 parents 501ef28 + 98b4e92 commit 63cfc11

5 files changed

Lines changed: 274 additions & 0 deletions

File tree

‎Css Animations/css animations/index.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>CSS Animations</title>
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
10+
<body>
11+
<marquee
12+
behavior="scroll"
13+
direction="left"
14+
scrollamount="10"
15+
onmouseover="this.stop();"
16+
onmouseout="this.start();"
17+
><header>
18+
<p>This is my CSS Animation website</p>
19+
</header>
20+
</marquee>
21+
<br />
22+
<br />
23+
<div class="container">
24+
I am Md Ilham Ansari. I am super excited to start my journey as a
25+
participant in Hacktoberfest 2022. I am contributing in open
26+
source for the very first time which makes it all the more special for me.
27+
Looking forward to learn a lot of new things during this 1 month
28+
journey.
29+
</div>
30+
<br><br><br><br>
31+
<div class="box"></div>
32+
<div class="ball">
33+
<ul>
34+
<li id="first"></li>
35+
<li id="second"></li>
36+
<li id="third"></li>
37+
<li id="fourth"></li>
38+
<li id="fifth"></li>
39+
</ul>
40+
</div>
41+
</body>
42+
</html>

‎Css Animations/css animations/readme.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# CSS Animation
2+
## techstack
3+
- html
4+
- css

‎Css Animations/css animations/style.css‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
p {
2+
text-align: center;
3+
font-size: 35px;
4+
}
5+
marquee {
6+
margin: 10px;
7+
/* padding: 10px; */
8+
overflow: hidden;
9+
position: relative;
10+
border: 2px solid orange;
11+
background-color: yellow;
12+
}
13+
header p:hover {
14+
font-family: "Courier New", Courier, monospace;
15+
}
16+
.container {
17+
width: 500px;
18+
border: 3px solid red;
19+
margin-left: 490px;
20+
margin-top: 10px;
21+
padding: 20px;
22+
display: inline-block;
23+
border-radius: 8px;
24+
justify-content: center;
25+
text-align: center;
26+
position: relative;
27+
font-size: 25px;
28+
box-shadow: 50px 10px violet;
29+
}
30+
.box{
31+
display: inline-block;
32+
margin-top: 450px;
33+
margin-left: 15px;
34+
width: 150px;
35+
height: 150px;
36+
background-color: red;
37+
position: absolute;
38+
animation-name: moving;
39+
animation-duration: 4s;
40+
animation-iteration-count: infinite;
41+
/* animation-delay: 0s; */
42+
}
43+
@keyframes moving{
44+
0%{background-color: red;left: 0%;top: 0%;}
45+
25%{background-color: magenta;left: 200px;top: 0%;}
46+
50%{background-color: blue;left: 200px;top: 200px;}
47+
75%{background-color: green;left: 0%;top: 200px;}
48+
100%{background-color: red;left: 0%;top: 0%;}
49+
}
50+
.ball{
51+
margin-left: 600px;
52+
53+
}
54+
div ul{
55+
display: flex;
56+
border-bottom: 8px solid black;
57+
margin-right: 400px;
58+
margin-top: 150px;
59+
}
60+
div ul li{
61+
width: 50px;
62+
height: 50px;
63+
background-color: black;
64+
list-style: none;
65+
margin: 0 10px;
66+
border-radius: 50%;
67+
animation: bouncy 1s linear infinite;
68+
}
69+
@keyframes bouncy{
70+
0%{transform: translateY(0);}
71+
50%{transform: translateY(-150px);}
72+
100%{transform: translateY(0);}
73+
}
74+
#first{
75+
animation-delay: 0.2s;
76+
background-color: #fdcb6e;
77+
}
78+
#second{
79+
animation-delay: 0.6ss;
80+
background-color: #ff7675;
81+
}
82+
#third{
83+
animation-delay: 0.4s;
84+
background-color: #81ecec;
85+
}
86+
#fourth{
87+
animation-delay: 0.8s;
88+
background-color: #55efc4;
89+
}
90+
#fifth{
91+
animation-delay: 0.5s;
92+
background-color: #fd79a8;
93+
}

‎Css Animations/index.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>CSS Animations</title>
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
10+
<body>
11+
<marquee
12+
behavior="scroll"
13+
direction="left"
14+
scrollamount="10"
15+
onmouseover="this.stop();"
16+
onmouseout="this.start();"
17+
><header>
18+
<p>This is my CSS Animation website</p>
19+
</header>
20+
</marquee>
21+
<br />
22+
<br />
23+
<div class="container">
24+
I am Md Ilham Ansari. I am super excited to start my journey as a
25+
participant in Hackclub Rait Summer of code. I am contributing in open
26+
source for the very first time which makes it all the more special for me.
27+
Looking forward to learn a lot of new things during this 1.5 months
28+
journey.
29+
</div>
30+
<br><br><br><br>
31+
<div class="box"></div>
32+
<div class="ball">
33+
<ul>
34+
<li id="first"></li>
35+
<li id="second"></li>
36+
<li id="third"></li>
37+
<li id="fourth"></li>
38+
<li id="fifth"></li>
39+
</ul>
40+
</div>
41+
</body>
42+
</html>

‎Css Animations/style.css‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
p {
2+
text-align: center;
3+
font-size: 35px;
4+
}
5+
marquee {
6+
margin: 10px;
7+
/* padding: 10px; */
8+
overflow: hidden;
9+
position: relative;
10+
border: 2px solid orange;
11+
background-color: yellow;
12+
}
13+
header p:hover {
14+
font-family: "Courier New", Courier, monospace;
15+
}
16+
.container {
17+
width: 500px;
18+
border: 3px solid red;
19+
margin-left: 490px;
20+
margin-top: 10px;
21+
padding: 20px;
22+
display: inline-block;
23+
border-radius: 8px;
24+
justify-content: center;
25+
text-align: center;
26+
position: relative;
27+
font-size: 25px;
28+
box-shadow: 50px 10px violet;
29+
}
30+
.box{
31+
display: inline-block;
32+
margin-top: 450px;
33+
margin-left: 15px;
34+
width: 150px;
35+
height: 150px;
36+
background-color: red;
37+
position: absolute;
38+
animation-name: moving;
39+
animation-duration: 4s;
40+
animation-iteration-count: infinite;
41+
/* animation-delay: 0s; */
42+
}
43+
@keyframes moving{
44+
0%{background-color: red;left: 0%;top: 0%;}
45+
25%{background-color: magenta;left: 200px;top: 0%;}
46+
50%{background-color: blue;left: 200px;top: 200px;}
47+
75%{background-color: green;left: 0%;top: 200px;}
48+
100%{background-color: red;left: 0%;top: 0%;}
49+
}
50+
.ball{
51+
margin-left: 600px;
52+
53+
}
54+
div ul{
55+
display: flex;
56+
border-bottom: 8px solid black;
57+
margin-right: 400px;
58+
margin-top: 150px;
59+
}
60+
div ul li{
61+
width: 50px;
62+
height: 50px;
63+
background-color: black;
64+
list-style: none;
65+
margin: 0 10px;
66+
border-radius: 50%;
67+
animation: bouncy 1s linear infinite;
68+
}
69+
@keyframes bouncy{
70+
0%{transform: translateY(0);}
71+
50%{transform: translateY(-150px);}
72+
100%{transform: translateY(0);}
73+
}
74+
#first{
75+
animation-delay: 0.2s;
76+
background-color: #fdcb6e;
77+
}
78+
#second{
79+
animation-delay: 0.6ss;
80+
background-color: #ff7675;
81+
}
82+
#third{
83+
animation-delay: 0.4s;
84+
background-color: #81ecec;
85+
}
86+
#fourth{
87+
animation-delay: 0.8s;
88+
background-color: #55efc4;
89+
}
90+
#fifth{
91+
animation-delay: 0.5s;
92+
background-color: #fd79a8;
93+
}

0 commit comments

Comments
 (0)