Skip to content

I have added some changes #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
alonsonina95 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

I have added some changes #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
163 changes: 163 additions & 0 deletions css/slide21.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
#circle1, #circle2, #circle3, #circle4, #circle5, #circle6, #circle7, #circle8, #circle9, #circle10, #circle11, #circle12 {
border-radius: 10px;
background-color: blueviolet;
border: 2px solid black;
width: 67px;
height: 76px;
margin: 10px;
}

.container {
position: relative;
display: flex;
justify-content: space-around;
height: 50%;
width: 50%;
left: 25%;
}

.container2 {
position: relative;
display: flex;
justify-content: space-around;
}

span{
margin: 0px 0px 0px 0px;
}

#circle1 {
animation: shake 0.5s;
animation-iteration-count: infinite;
}

#circle2 {
animation: fadeIn ease 2s;
animation: fadeIn ease 2s;
animation-iteration-count: infinite;
}

#circle3 {
animation: wiggle 0.5s;
animation-iteration-count: infinite;
}

#circle4 {
animation: bounce 1s linear;
animation-iteration-count: infinite;
}

#circle5 {
animation: tada 1s linear;
animation-iteration-count: infinite;
}

#circle6 {
animation: spin 1s linear infinite;
}

#circle7 {
animation: swing 2s linear infinite;
}

#circle8 {
animation: squeeze 2s linear infinite;
}

#circle9 {
animation: flicker 0.5s linear infinite;
}

#circle11 {
animation: blink-animation 1s steps(5, start) infinite;
}

#circle12 {
animation: pop 0.3s linear infinite;
}

@keyframes pop{
50% {transform: scale(1.2);}
}

@keyframes blink-animation {
to {
visibility: hidden;
}
}

@keyframes flicker {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}


@keyframes spin {
from{ transform: rotate(0deg);}
to{transform: rotate(360deg);}
}

@keyframes swing {
20% { transform: rotate(15deg); }
40% { transform: rotate(-10deg); }
60% { transform: rotate(5deg); }
80% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}

@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@keyframes bounce {
20%,50%,80%,to {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
70% {
transform: translateY(-15px);
}
90% {
transform: translateY(-4px);
}
}

@keyframes wiggle {
20% {
transform: scale(0.8,1.3);
}
50% {
transform: scale(1.1,0.8);
}
75% {
transform: scale(0.7,1.2);
}
}

@keyframes tada {
0% {transform: scale(1);}
10%, 20% {transform: scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
100% {transform: scale(1) rotate(0);}
}


27 changes: 27 additions & 0 deletions css/slide22.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
.square {
position: absolute;
height: 300px;
width: 300px;
background-color: yellow;
top: 20%;
animation: move 5s infinite;
}

@keyframes move {
0% {
left:400px;
}
25%{
left: 1000px;
transform: scale3d(0.2,0.2,0.2)
}
50%{
transform: translateX(400px);
}
75%{
transform: scale3d(0.2,0.2,0.2);
}
100% {
left: 400px;
}
}
17 changes: 17 additions & 0 deletions css/slide23.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
.purpleCircle {
position: absolute;
height: 500px;
width: 700px;
border: 5px solid purple;
top: 25%;
left: 25%;
}

.blueCircle{
position: absolute;
height: 100px;
width: 100px;
background-color: aqua;
top:20%;
left: 40%;
}
40 changes: 40 additions & 0 deletions css/slide24.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
.purpleCircle {
position: absolute;
height: 500px;
width: 700px;
border: 5px solid purple;
top: 25%;
left: 25%;
}

.blueCircle{
position: absolute;
height: 100px;
width: 100px;
background-color: aqua;
top:20%;
left: 40%;
animation: move 5s infinite;
}

@keyframes move {
0% {
transform: translate(0,0);

}
25% {
transform: translate(400px,0);

}
50% {
transform: translate(400px,500px);

}
75% {
transform: translate(-300px,500px);
}
90% {
transform: translate(-300px, 0);
}

}
64 changes: 27 additions & 37 deletions sldie21.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,47 +9,37 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<link href="./css/slide21.css" rel="stylesheet">
<script type="text/javascript" src="./js/header-functions.js"></script>

</head> <!-- header ends here -->
<!-- ----------------------------------------------------------------- -->
<!-- ----------------------------------------------------------------- -->
<!-- ----------------------------------------------------------------- -->












<!-- ---------------------------------------------------------------------------------- -->
<!-- ---------------------------------------------------------------------------------- -->
<!-- ---------------------------------------------------------------------------------- -->
<body> <!-- body begins here -->
The quickest of brown foxes




<!-- ====================================================== -->
<!-- ====================================================== -->
<footer>
<!-- footer of page begins here -->
<script type="text/javascript" src="./js/footer-functions.js"></script>
</footer> <!-- footer of page ends here -->
<!-- ====================================================== -->
<!-- ====================================================== -->
<div class="container">
<div id="circle1">shake</div>
<div id="circle2">fade</div>
<div id="circle3">jelly</div>
<div id="circle4">bounce</div>
<div id="circle5">tada</div>
<div id="circle6">groove</div>
<div id="circle7">swing</div>
<div id="circle8">squeeze</div>
<div id="circle9">flicker</div>
<div id="circle10">jerk</div>
<div id="circle11">blink</div>
<div id="circle12">pop</div>
</div>
<!-- <div class="container2">
<span>one</span>
<span>one</span>
<span>one</span>
<span>one</span>
<span>one</span>
<span>one</span>
<span>one</span>
<span>one</span>
<span>one</span>
<span>one</span>
<span>one</span>
</div> -->

</body>
<!-- ---------------------------------------------------------------------------------- -->
<!-- ---------------------------------------------------------------------------------- -->
<!-- ---------------------------------------------------------------------------------- -->

</html>
48 changes: 4 additions & 44 deletions slide22.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,55 +1,15 @@
<!DOCTYPE html>
<html lang="en">

<!-- ----------------------------------------------------------------- -->
<!-- ----------------------------------------------------------------- -->
<!-- ----------------------------------------------------------------- -->
<head> <!-- header begins here -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<link href="./css/slide22.css" rel="stylesheet">
<script type="text/javascript" src="./js/header-functions.js"></script>

</head> <!-- header ends here -->
<!-- ----------------------------------------------------------------- -->
<!-- ----------------------------------------------------------------- -->
<!-- ----------------------------------------------------------------- -->












<!-- ---------------------------------------------------------------------------------- -->
<!-- ---------------------------------------------------------------------------------- -->
<!-- ---------------------------------------------------------------------------------- -->
<body> <!-- body begins here -->
The quickest of brown foxes




<!-- ====================================================== -->
<!-- ====================================================== -->
<footer>
<!-- footer of page begins here -->
<script type="text/javascript" src="./js/footer-functions.js"></script>
</footer> <!-- footer of page ends here -->
<!-- ====================================================== -->
<!-- ====================================================== -->
</head>
<body>

<div class="square"></div>
</body>
<!-- ---------------------------------------------------------------------------------- -->
<!-- ---------------------------------------------------------------------------------- -->
<!-- ---------------------------------------------------------------------------------- -->

</html>
Loading