Technology Empowerment Team
Form 3 ~ 6 Potential Course
2023-2024
Floor 4 - Computer Room
Mr. Peter
Outline
1
2
Connect to the server
Development and practice
1.1.
Ex18 - Wave Animation01
1.2.
Ex19 - Wave Aniamtion02
1.3.
Ex20 - Wave Animation03
1.4.
Ex21 - Wave Animation04
Server
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
Exercise Outline
Choose a exercise from left hand side
Ex18 - Wave Animation01
Part 1
Part 1 - Tasks:
Create a folder called
1.
Create a file called under the folder
2.
HTML structure
3.
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
* {
box-sizing: border-box;
}Tab
Create a <div> element
4.
Tab
Create a <style> element within <head>
5.
Tab
Center every elements in <body> element horizontally and vertically
6.
7.
Set the width to 200 pixels
-
Set the height to 200 pixels
-
Set a background color
-
Set a border radius with 50%
-
border-radius: 50%;Ex18 - Wave Animation01
8.
Scale the circle to be 0 by default
9.
transform: scale(0);Define a animation called "loading" and define the animation from scaling 0 to be origin size
10.
@keyframes loading {
0% {
}
100% {
}
}Apply the animation "loading" to the <div>, set the animation time to be 2 second and in a infinite looping
11.
animation: loading 2s infinite;Part 1 - Tasks:
Create a folder called
1.
Create a file called under the folder
2.
HTML structure
3.
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
* {
box-sizing: border-box;
}Tab
Create a <div> element
4.
Tab
Create a <style> element within <head>
5.
Tab
Center every elements in <body> element horizontally and vertically
6.
7.
Set the width to 200 pixels
-
Set the height to 200 pixels
-
Set a background color
-
Set a border radius with 50%
-
border-radius: 50%;Ex18 - Wave Animation01
8.
Scale the circle to be 0 by default
9.
transform: scale(0);Define a animation called "loading" and define the animation from scaling 0 to be origin size
10.
@keyframes loading {
0% {
}
100% {
}
}Apply the animation "loading" to the <div>, set the animation time to be 2 second and in a infinite looping
11.
animation: loading 2s infinite;Part 1 - Tasks:
Create a folder called
1.
Create a file called under the folder
2.
HTML structure
3.
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
* {
box-sizing: border-box;
}Tab
Create a <div> element
4.
Tab
Create a <style> element within <head>
5.
Tab
Center every elements in <body> element horizontally and vertically
6.
7.
Set the width to 200 pixels
-
Set the height to 200 pixels
-
Set a background color
-
Set a border radius with 50%
-
border-radius: 50%;Ex18 - Wave Animation01
8.
Scale the circle to be 0 by default
9.
transform: scale(0);Define a animation called "loading" and define the animation from scaling 0 to be origin size
10.
@keyframes loading {
0% {
}
100% {
}
}Apply the animation "loading" to the <div>, set the animation time to be 2 second and in a infinite looping
11.
animation: loading 2s infinite;Ex18 - Wave Animation01
Part 2
Part 2 - Tasks:
Set the transparency during the animation
1.
opacity: 1;Ex18 - Wave Animation01
Ex18 - Wave Animation01
Part 3
Part 3 - Tasks:
Duplicate four more <div> in HTML
1.
Ex18 - Wave Animation01
Make each <div> floating and don't affect each other
2.
Assign "circle" class into each <div> and name it from 1 to 5
i.e. circle1, circle2, circle3, circle4 and circle5
3.
<div class="circle1"></div>position: absolute;Set the animation delay time at the end of the code
For second circle <div>, which will delay 0.6s to start the aniamtion
4.
.circle2 {
animation: loading 2s infinite 0.666s;
}For the final circle <div>, its delay time will be double than the previous one.
Ex19 - Wave Animation02
Part 1
Part 1 - Tasks:
Create a folder called
1.
Create a file called under the folder
2.
HTML structure
3.
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
* {
box-sizing: border-box;
}Tab
Create a <div> element
4.
Tab
Create a <style> element within <head>
5.
Tab
Center every elements in <body> element horizontally and vertically
6.
7.
Set the width to 30 pixels
-
Set the height to 30 pixels
-
Set a background color
-
Set a border radius with 50%
-
border-radius: 50%;Ex19 - Wave Animation02
8.
Move it up 60px by default
9.
transform: translateY(-60px);Define a animation called "loading"
10.
@keyframes loading {
0% {
}
50% {
}
100% {
}
}Apply the animation "loading" to the <div>, set the animation time complete in 1 second and set the timing function as ease-in-out
11.
animation: loading 1s infinite ease-in-out;Set a border color with 4px thickness
-
border: 4px solid #0c549c;Change the following properties during the animation
Movement using translate() in transform syntax
background color
border color
1.
2.
3.
Part 1 - Tasks:
Create a folder called
1.
Create a file called under the folder
2.
HTML structure
3.
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
* {
box-sizing: border-box;
}Tab
Create a <div> element
4.
Tab
Create a <style> element within <head>
5.
Tab
Center every elements in <body> element horizontally and vertically
6.
7.
Set the width to 30 pixels
-
Set the height to 30 pixels
-
Set a background color
-
Set a border radius with 50%
-
border-radius: 50%;Ex19 - Wave Animation02
8.
Move it up 60px by default
9.
transform: translateY(-60px);Define a animation called "loading"
10.
@keyframes loading {
0% {
}
50% {
}
100% {
}
}Apply the animation "loading" to the <div>, set the animation time complete in 1 second and set the timing function as ease-in-out
11.
animation: loading 1s infinite ease-in-out;Set a border color with 4px thickness
-
border: 4px solid #0c549c;Change the following properties during the animation
Movement using translate() in transform syntax
background color
border color
1.
2.
3.
Part 1 - Tasks:
Create a folder called
1.
Create a file called under the folder
2.
HTML structure
3.
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
* {
box-sizing: border-box;
}Tab
Create a <div> element
4.
Tab
Create a <style> element within <head>
5.
Tab
Center every elements in <body> element horizontally and vertically
6.
7.
Set the width to 30 pixels
-
Set the height to 30 pixels
-
Set a background color
-
Set a border radius with 50%
-
border-radius: 50%;Ex19 - Wave Animation02
8.
Move it up 60px by default
9.
transform: translateY(-60px);Define a animation called "loading"
10.
@keyframes loading {
0% {
}
50% {
}
100% {
}
}Apply the animation "loading" to the <div>, set the animation time complete in 1 second and set the timing function as ease-in-out
11.
animation: loading 1s infinite ease-in-out;Set a border color with 4px thickness
-
border: 4px solid #0c549c;Change the following properties during the animation
Movement using translate() in transform syntax
background color
border color
1.
2.
3.
Ex19 - Wave Animation02
Part 2
Ex19 - Wave Animation02
Part 2 - Tasks:
Duplicate four more <div> in HTML
1.
Set a margin to <div> for creating a gap between each circle
2.
Assign "circle" class into each <div> and name it from 1 to 5
i.e. circle1, circle2, circle3, circle4 and circle5
3.
<div class="circle1"></div>margin: 10px;Ex19 - Wave Animation02
Part 3
Ex19 - Wave Animation02
Part 3 - Tasks:
Set the animation delay time at the end of the code
For second circle <div>, which will delay 0.1s to start the aniamtion
.circle2 {
animation: loading 1s infinite 0.1s ease-in-out;
}For the following circle <div> in the aniamtion, its delay time will be double than the previous one.
1.
Ex20 - Wave Animation03
Part 1
Part 1 - Tasks:
Create a folder called
1.
Create a file called under the folder
2.
HTML structure
3.
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
* {
box-sizing: border-box;
}Tab
Create a <div> element
4.
Tab
Create a <style> element within <head>
5.
Tab
Center every elements in <body> element horizontally and vertically
6.
7.
Set the width to 10 pixels
-
Set the height to 70 pixels
-
Set a background color
-
Set a border radius with 10px
-
border-radius: 10px;Ex20 - Wave Animation03
8.
Define a animation called "loading"
9.
@keyframes loading {
0% {
}
50% {
}
100% {
}
}Apply the animation "loading" to the <div>, set the animation time complete in 1 second
10.
animation: loading 1s infinite;Set a border color with 2px thickness
-
border: 4px solid #c23c3c;Change the height properties during the animation
Part 1 - Tasks:
Create a folder called
1.
Create a file called under the folder
2.
HTML structure
3.
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
* {
box-sizing: border-box;
}Tab
Create a <div> element
4.
Tab
Create a <style> element within <head>
5.
Tab
Center every elements in <body> element horizontally and vertically
6.
7.
Set the width to 10 pixels
-
Set the height to 70 pixels
-
Set a background color
-
Set a border radius with 10px
-
border-radius: 10px;Ex20 - Wave Animation03
8.
Define a animation called "loading"
9.
@keyframes loading {
0% {
}
50% {
}
100% {
}
}Apply the animation "loading" to the <div>, set the animation time complete in 1 second
10.
animation: loading 1s infinite;Set a border color with 2px thickness
-
border: 4px solid #c23c3c;Change the height properties during the animation
Part 1 - Tasks:
Create a folder called
1.
Create a file called under the folder
2.
HTML structure
3.
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
* {
box-sizing: border-box;
}Tab
Create a <div> element
4.
Tab
Create a <style> element within <head>
5.
Tab
Center every elements in <body> element horizontally and vertically
6.
7.
Set the width to 10 pixels
-
Set the height to 70 pixels
-
Set a background color
-
Set a border radius with 10px
-
border-radius: 10px;Ex20 - Wave Animation03
8.
Define a animation called "loading"
9.
@keyframes loading {
0% {
}
50% {
}
100% {
}
}Apply the animation "loading" to the <div>, set the animation time complete in 1 second
10.
animation: loading 1s infinite;Set a border color with 2px thickness
-
border: 4px solid #c23c3c;Change the height property during the animation
Ex20 - Wave Animation03
Part 2
Ex20 - Wave Animation03
Part 2 - Tasks:
Duplicate four more <div> in HTML
1.
Set a margin to <div> for creating a gap between each circle
2.
Assign "bar" class into each <div> and name it from 1 to 5
i.e. bar1, bar2, bar3, bar4 and bar5
3.
<div class="bar1"></div>margin: 5px;Ex20 - Wave Animation03
Part 3
Ex20 - Wave Animation03
Slower version
Ex20 - Wave Animation03
Part 3 - Tasks
Assign animation into each "bar" <div>
.bar1 {
animation: loading 1s infinite 0s;
}1.
Observe the loading animation and change the animation and animation delay for each "bar" <div>
@keyframes loading {
}2.
animation: loading 1s infinite 0s;Ex21 - Loading Animation