< !DOCTYPE html >
< !DOCTYPE html >
< html lang="en" >
< head >
< meta charset="UTF-8" >
< meta http-equiv="X-UA-Compatible"
content="IE=edge" >
< meta name="viewport"
content="width=device-width,
initial-scale=1.0" >
< title >
Animation
< title >
< link rel="stylesheet"
href="./1_animation.css" >
< /head >
< body >
< div >
< /div >
< script src="./script.js" >
< /script >
< /body >
< /html >
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: viren 5s forwards;
}
@keyframes viren {
0%{
background: red;
left: 0px;
top: 0px;
border-radius:0%;
}
25%{
background: black;
left: 400px;
top: 0px;
border-radius:0%;
}
50%{
background: blue;
left: 400px;
top: 300px;
border-radius:0%;
}
100%{
background: green;
left: 0px;
top: 300px;
border-radius:50%;
}
}
< !DOCTYPE html >
< html lang="en" >
< head >
< meta charset="UTF-8" / >
< meta http-equiv=
"X-UA-Compatible"
content="IE=edge" / >
< meta name="viewport"
content="width=device-width,
initial-scale=1.0" / >
< !DOCTYPE html >
< !DOCTYPE html >
< html lang="en" >
< head>
< meta charset="UTF-8" />
< meta http-equiv="X-UA-Compatible"
content="IE=edge" />
< meta name="viewport" content="
width=device-width, initial-scale=1.0" />
< title
Checkpoins
< /title>
< link rel="stylesheet" href="./task2.css" />
< link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/
font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGx
u9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEK
NosOWaZqXgel0g=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/ >
< /head>
< body>
< div class="container">
< div id="point1" onclick="a()">
< p>1
< /p >
< /div>
< hr id="pointhr" />
< div id="point2" onclick="ab()">
< p id="p1">2
< /p >
< /div>
< hr id="point1hr" />
< div id="point3" onclick="abc()">
< p>3
< /p >
< /div>
< hr id="point2hr" />
< div id="point4" onclick="abcd()">
< p>4
< /p >
< /div>
< /div>
< h1 id="first">
1st Step Complete
< /h1>
< h1 id="scnd">
2nd Step Complete
< /h1>
< h1 id="thrd">
3rd Step Complete
< /h1>
< h1 id="frth">
All Step Complete
< /h1>
< script src="./task2.js">
< /script >
< /body>
< /html >
*{
padding: 0%;
margin: 0%;
}
.container{
display: flex;
justify-content: space-evenly;
align-items: center;
margin: 100px;
}
#point1{
border: 2px solid black;
padding: 80px;
border-radius: 50%;
cursor: pointer;
}
#point1 p{
font-size: xx-large;
}
#point2{
border: 2px solid black;
padding: 80px;
border-radius: 50%;
cursor: pointer;
}
#point2 p{
font-size: xx-large;
}
#point3{
border: 2px solid black;
padding: 80px;
border-radius: 50%;
cursor: pointer;
}
#point3 p{
font-size: xx-large;
}
#point4{
border: 2px solid black;
padding: 80px;
border-radius: 50%;
cursor: pointer;
}
#point4 p{
font-size: xx-large;
}
#pointhr{
left: 27%;
width: 0px;
position: absolute;
transition: 2s all;
height: 5px;
background: #000;
}
#point1hr{
left: 46.6%;
width: 0px;
position: absolute;
transition: 2s all;
height: 5px;
background: #000;
}
#point2hr{
left: 66.4%;
width: 0px;
position: absolute;
transition: 2s all;
height: 5px;
background: #000;
}
#first{
visibility: hidden;
position: absolute;
top: 50%;
left: 13%;
font-size: 1.5rem;
color: cadetblue;
}
#scnd{
visibility: hidden;
position: absolute;
top: 50%;
left: 33%;
font-size: 1.5rem;
color: cadetblue;
}
#thrd{
visibility: hidden;
position: absolute;
top: 50%;
left: 53%;
font-size: 1.5rem;
color: cadetblue;
}
#frth{
visibility: hidden;
position: absolute;
top: 50%;
left: 72%;
font-size: 1.5rem;
color: cadetblue;
}
< function a(){
document.getElementById("point1").
style.backgroundColor="red";
document.getElementById("pointhr").
style.width="0px";
document.getElementById("point1hr").
style.width="0px";
document.getElementById("point2hr").
style.width="0px";
// document.getElementById
("point2hr").style.visibility="hidden";
// document.getElementById("first").
style.visibility="hidden";
document.getElementById("point2").
style.backgroundColor="white";
document.getElementById("point3").
style.backgroundColor="white";
document.getElementById("point4").
style.backgroundColor="white";
document.getElementById("first").
style.visibility="visible";
document.getElementById("scnd").
style.visibility="hidden";
document.getElementById("thrd").
style.visibility="hidden";
document.getElementById("frth").
style.visibility="hidden";
}
function ab(){
document.getElementById("point1").
style.backgroundColor="red";
document.getElementById("point2").
style.backgroundColor="green";
document.getElementById("point3").
style.backgroundColor="white";
document.getElementById("point4").
style.backgroundColor="white";
document.getElementById("pointhr").
style.width="86px";
document.getElementById("point1hr").
style.width="0px";
document.getElementById("point2hr").
style.width="0px";
document.getElementById("first").
style.visibility="visible";
document.getElementById("scnd").
style.visibility="visible";
document.getElementById("thrd").
style.visibility="hidden";
document.getElementById("frth").
style.visibility="hidden";
}
function abc(){
document.getElementById("point1").
style.backgroundColor="red";
document.getElementById("point2").
style.backgroundColor="green";
document.getElementById("point3").
style.backgroundColor="yellow";
document.getElementById("point4").
style.backgroundColor="white";
document.getElementById("pointhr").
style.width="86px";
document.getElementById("point1hr").
style.width="86px";
document.getElementById("point2hr").
style.width="0px";
document.getElementById("first").
style.visibility="visible";
document.getElementById("scnd").
style.visibility="visible";
document.getElementById("thrd").
style.visibility="visible";
document.getElementById("frth").
style.visibility="hidden";
}
function abcd(){
document.getElementById("point1").
style.backgroundColor="red";
document.getElementById("point2").
style.backgroundColor="green";
document.getElementById("point3").
style.backgroundColor="yellow";
document.getElementById("point4").
style.backgroundColor="blue";
document.getElementById("pointhr").
style.width="86px";
document.getElementById("point1hr").
style.width="86px";
document.getElementById("point2hr").
style.width="86px";
document.getElementById("first").
style.visibility="visible";
document.getElementById("scnd").
style.visibility="visible";
document.getElementById("thrd").
style.visibility="visible";
document.getElementById("frth").
style.visibility="visible";
} >