How to create a table like exemple of the table to simulate a light animation. The animation is, after a click on the start button, change gradually the color of the tiles from left to right, then from top to bottom using a list of ten colors different. Will Appreciate any help.
I have the code HTML and CSS, i need JS.
table, td {
padding: 0;
border-collapse: collapse;
}
body {
width: 624px;
margin-left: auto;
margin-right: auto;
line-height: 1;
}
.groupe1 {
background-color:#B0090C;
float: left;
height: 35px;
width: 35px;
}
.groupe2 {
background-color:#F7F27F;
float: left;
height: 35px;
width: 35px;
}
body button {
border-radius: 10px;
}
.round-button {
display:block;
width:60px;
height:60px;
line-height:50px;
border: 2px solid #f5f5f5;
border-radius: 50%;
color:#f5f5f5;
text-align:center;
text-decoration:none;
background:#A40205;
box-shadow: 0 0 3px gray;
font-size:20px;
font-weight:bold;
margin-left: auto;
margin-right:auto;
}
.round-button:hover {
background:#9E2C2E;
}<html>
<head>
<title></title>
<link rel="stylesheet" href="projet.css" type="text/css" />
</head>
<body>
<div id="container">
<table >
<tbody>
<tr>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
</tr>
<tr>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
</tr>
<tr>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
</tr>
<tr>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
</tr>
<tr>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
</tr>
<tr>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
</tr>
<tr>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
</tr>
<tr>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
</tr>
<tr>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
</tr>
<tr>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
</tr>
<tr>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
</tr>
<tr>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
</tr>
<tr>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
</tr>
<tr>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
</tr>
<tr>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
</tr>
<tr>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
</tr>
</tbody>
</table>
</div>
<button class="round-button"onclick="animation()">Start</button>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire