<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>听指令的小方块2</title>
<style>
*{
padding:0;
margin:0;
}
table{
border:2px solid #000000;
border-collapse: collapse;
margin:50px auto;
}
table th{
width:50px;
height:50px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border:1px solid #ccc;
}
.red{
width:50px;
height:10px;
background: red;
}
.blue{
width:50px;
height:40px;
background: blue;
}
.rool{
width:415px;
margin:0 auto;
}
.rool .btn{
width:80px;
height:30px;
margin:10px;
color: #fff;
background:blue;
border:1px solid blue;
border-radius: 5px;
cursor: pointer;
transition: color .3s,background-color .3s; /*设置两个*/
/*过渡属性 需要时间 速度曲线 延迟开始时间*/
}
.rool .btn:hover{
background: #fff;
color: blue;
}
</style>
</head>
<body>
<table>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
</tr>
<tr>
<th>1</th>
<th class="diamond" id="diamond" style="transform:rotate(0deg); position: relative; top:0; left:0;">
<div class="red"></div>
<div class="blue"></div>
</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th>2</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th>3</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th>4</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th>5</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th>6</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th>7</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th>8</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th>9</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th>10</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</table>
<div class="rool">
<button type="button" class="btn" id="tralef">TRA LEF</button><!--左移动，方向不变-->
<button type="button" class="btn" id="tratop">TRA TOP</button><!--上移动，方向不变-->
<button type="button" class="btn" id="trarig">TRA RIG</button><!--右移动，方向不变-->
<button type="button" class="btn" id="trabot">TRA BOT</button><!--下移动，方向不变-->
<button type="button" class="btn" id="movlef">MOV LEF</button><!--左旋转，左移动-->
<button type="button" class="btn" id="movtop">MOV TOP</button><!--上旋转，上移动-->
<button type="button" class="btn" id="movrig">MOV RIG</button><!--右旋转，右移动-->
<button type="button" class="btn" id="movbot">MOV BOT</button><!--下旋转，下移动-->
</div>
</body>
</html>
添加回答
举报
0/150
提交
取消