The HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<div class="road">
<br /><br /><br /><br />
<table>
<tr>
<td><div class="light"></div></td>
<td><div class="light"></div></td>
<td><div class="light"></div></td>
</tr>
</table>
        
<img id="first" src="https://www.linkpicture.com/q/images_2-removebg-preview-1.png"/>                     
<img id="second"
src="https://www.linkpicture.com/q/images_1_2-removebg-preview.png"/>
</div>
</body>
</html>
The CSS
@keyframes move{
0%{margin-top:500px;}
100%{margin-top:-200px;}
}
@keyframes change{
0%{background-color:red;}
25%{background-color:black;}
50%{background-color:yellow;}
75%{background-color:black;}
100%{background-color:green;}
}
div.light{
z-index:2;
height:50px;
width:50px;
border-radius:25px;
animation-name:change;
animation-duration:10s;
margin-left:20px;
}
body{
background-color:lightgreen;
}
div.road{
width:250px;
color: white;
height:700px;
background-color:black;
margin-left:60px;
position: absolute;
}
div.one{
position: absolute;
background-color:white;
width:15px;
height:50px;
margin-left:170px;
z-index:1;
}
div.two{
position: absolute;
background-color:white;
width:15px;
height:50px;
margin-left:170px;
margin-top:150px;
z-index:1;
}
div.three{
position: absolute;
background-color:white;
width:15px;
height:50px;
margin-left:170px;
margin-top:300px;
z-index:1;
}
div.four{
position: absolute;
background-color:white;
width:15px;
height:50px;
margin-left:170px;
margin-top:450px;
z-index:1
}
div.five{
position: absolute;
background-color:white;
width:15px;
height:50px;
margin-left:170px;
margin-top:600px;
z-index:1
}
img{
height:20%;
width:20%;
margin-top:550px;
animation-name:move;
animation-duration:5s;
animation-iteration-count:infinite;
animation-delay:10s;
}
OUTPUT
Comments
Post a Comment