SOURCE

console 命令行工具 X clear

                    
>
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>