console
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
#total{
width:800px;
height:800px;
position:relative;
border:3px solid #000
}
.tank
{
height:50px;
width:50px;
text-align:center;
border:2px solid #000;
animation-timing-function:ease;
}
#t1{
position:absolute;
background:#FFCC00;
left:700px;
top:700px;
animation:t1 30s;
}
#t2{
position:absolute;
left:50px;
top:700px;
animation:t2 30s;
background:red;
}
#t3{
position:absolute;
left:50px;
top:50px;
animation:t3 30s;
background:#90EE90;
}
#t4{
position:absolute;
left:700px;
top:50px;
animation:t4 30s;
background:#DA70D6;
}
#t5{
position:absolute;
left:300px;
top:350px;
animation:t5 30s;
background:#E0FFFF;
}
#t6{
position:absolute;
left:400px;
top:350px;
animation:t6 30s;
background:#FF8C00;
}
#lz{
position:absolute;
left:0px;
top:750px;
}
#az{
position:absolute;
left:750px;
top:750px;
}
#hm{
position:absolute;
left:0px;
top:0px;
}
#bm{
position:absolute;
left:750px;
top:0px;
}
@keyframes t1
{
5% {left:700px; top:700px;}
10% {left:700px; top:700px;}
15% {left:700px; top:700px;}
20% {left:350px; top:350px;}
25% {left:300px; top:350px;}
30% {left:300px; top:350px;}
35% {left:100px; top:700px;}
40% {left:50px; top:700px;}
45% {left:50px; top:700px;}
50% {left:50px; top:700px;}
55% {left:50px; top:100px;}
60% {left:50px; top:50px;}
65% {left:50px; top:50px;}
70% {left:50px; top:50px;}
75% {left:400px; top:350px;}
80% {left:700px; top:100px;}
85% {left:700px; top:50px;}
90% {left:700px; top:50px;}
95% {left:700px; top:50px;}
100% {left:350px; top:350px;}
}
@keyframes t2
{
5% {left:50px; top:700px;}
10% {left:50px; top:100px;}
15% {left:50px; top:50px;}
20% {left:50px; top:50px;}
25% {left:50px; top:50px;}
30% {left:400px; top:350px;}
35% {left:700px; top:100px;}
40% {left:700px; top:50px;}
45% {left:700px; top:50px;}
50% {left:700px; top:50px;}
55% {left:350px; top:350px;}
60% {left:350px; top:350px;}
65% {left:300px; top:350px;}
70% {left:300px; top:350px;}
75% {left:300px; top:350px;}
80% {left:100px; top:700px;}
85% {left:50px; top:700px;}
90% {left:50px; top:700px;}
95% {left:50px; top:700px;}
100% {left:50px; top:100px;}
}
@keyframes t3
{
5% {left:50px; top:50px;}
10% {left:50px; top:50px;}
15% {left:400px; top:350px;}
20% {left:700px; top:100px;}
25% {left:700px; top:50px;}
30% {left:700px; top:50px;}
35% {left:700px; top:50px;}
40% {left:350px; top:350px;}
45% {left:350px; top:350px;}
50% {left:300px; top:350px;}
55% {left:300px; top:350px;}
60% {left:300px; top:350px;}
65% {left:100px; top:700px;}
70% {left:50px; top:700px;}
75% {left:50px; top:700px;}
80% {left:50px; top:700px;}
85% {left:50px; top:100px;}
90% {left:50px; top:50px;}
95% {left:50px; top:50px;}
100% {left:50px; top:50px;}
}
@keyframes t4
{
5% {left:700px; top:50px;}
10% {left:300px; top:350px;}
15% {left:300px; top:350px;}
20% {left:100px; top:700px;}
30% {left:50px; top:700px;}
35% {left:50px; top:700px;}
40% {left:50px; top:100px;}
45% {left:50px; top:50px;}
50% {left:50px; top:50px;}
55% {left:50px; top:50px;}
60% {left:400px; top:350px;}
65% {left:700px; top:100px;}
70% {left:700px; top:50px;}
75% {left:700px; top:50px;}
80% {left:700px; top:50px;}
85% {left:350px; top:350px;}
90% {left:350px; top:350px;}
95% {left:300px; top:350px;}
100% {left:300px; top:350px;}
}
@keyframes t5
{
5% {left:100px; top:700px;}
10% {left:50px; top:700px;}
15% {left:50px; top:700px;}
20% {left:50px; top:700px;}
25% {left:50px; top:100px;}
30% {left:50px; top:50px;}
35% {left:50px; top:50px;}
40% {left:50px; top:50px;}
45% {left:400px; top:350px;}
50% {left:700px; top:100px;}
55% {left:700px; top:50px;}
60% {left:700px; top:50px;}
65% {left:700px; top:50px;}
70% {left:350px; top:350px;}
75% {left:350px; top:350px;}
80% {left:300px; top:350px;}
85% {left:300px; top:350px;}
90% {left:300px; top:350px;}
95% {left:100px; top:700px;}
100% {left:50px; top:700px;}
}
@keyframes t6
{
5% {left:700px; top:100px;}
10% {left:700px; top:50px;}
15% {left:700px; top:50px;}
20% {left:700px; top:50px;}
25% {left:350px; top:350px;}
30% {left:350px; top:350px;}
35% {left:300px; top:350px;}
40% {left:300px; top:350px;}
45% {left:300px; top:350px;}
50% {left:100px; top:700px;}
55% {left:50px; top:700px;}
60% {left:50px; top:700px;}
65% {left:50px; top:700px;}
70% {left:50px; top:100px;}
75% {left:50px; top:50px;}
80% {left:50px; top:50px;}
85% {left:50px; top:50px;}
90% {left:400px; top:350px;}
95% {left:700px; top:100px;}
100% {left:700px; top:50px;}
}
</style>
<body>
<div id="total">
<div class="tank" id="t1">
1T
</div>
<div class="tank" id="t2">
2T
</div>
<div class="tank" id="t3">
3T
</div>
<div class="tank" id="t4" >
4T
</div>
<div class="tank" id="t5">
5T
</div>
<div class="tank" id="t6">
6T
</div>
<div class="tank" id="lz">
领主
</div>
<div class="tank" id="az">
矮子
</div>
<div class="tank" id="hm">
黑马
</div>
<div class="tank" id="bm">
白马
</div>
</div>
</body>
</html>