两个班级

时间：2018-04-26 07:43:14

标签： javascript jquery jquery-animate

我希望在鼠标移动块之后将颜色渐变从灰色设置为粉红色。

但是我尝试在两个类之间制作动画，似乎没有用。

非常感谢任何帮助。

$('.blocks').mouseenter(function(){
		$(this).addClass('current');
		setTimeout(function(){
			//$(this).animate('.current',null); //this line is not working
		},1500);
	});
.playboard{
		width: 330px;
	}
	.blocks
	{
		display: inline-block;
		width: 30px;
		height: 30px;
		background-color:pink;

	}
	.blocks.current{
		background-color:grey;
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="playboard"><div class="blocks" data-x="0" data-y="0"></div><div class="blocks" data-x="0" data-y="1"></div><div class="blocks" data-x="0" data-y="2"></div><div class="blocks" data-x="0" data-y="3"></div><div class="blocks" data-x="0" data-y="4"></div><div class="blocks" data-x="0" data-y="5"></div><div class="blocks" data-x="0" data-y="6"></div><div class="blocks" data-x="0" data-y="7"></div><div class="blocks" data-x="0" data-y="8"></div><div class="blocks" data-x="0" data-y="9"></div><div class="blocks" data-x="0" data-y="10"></div><div class="blocks" data-x="1" data-y="0"></div><div class="blocks" data-x="1" data-y="1"></div><div class="blocks" data-x="1" data-y="2"></div><div class="blocks" data-x="1" data-y="3"></div><div class="blocks" data-x="1" data-y="4"></div><div class="blocks" data-x="1" data-y="5"></div><div class="blocks" data-x="1" data-y="6"></div><div class="blocks" data-x="1" data-y="7"></div><div class="blocks" data-x="1" data-y="8"></div><div class="blocks" data-x="1" data-y="9"></div><div class="blocks" data-x="1" data-y="10"></div><div class="blocks" data-x="2" data-y="0"></div><div class="blocks" data-x="2" data-y="1"></div><div class="blocks" data-x="2" data-y="2"></div><div class="blocks" data-x="2" data-y="3"></div><div class="blocks" data-x="2" data-y="4"></div><div class="blocks" data-x="2" data-y="5"></div><div class="blocks" data-x="2" data-y="6"></div><div class="blocks" data-x="2" data-y="7"></div><div class="blocks" data-x="2" data-y="8"></div><div class="blocks" data-x="2" data-y="9"></div><div class="blocks" data-x="2" data-y="10"></div><div class="blocks" data-x="3" data-y="0"></div><div class="blocks" data-x="3" data-y="1"></div><div class="blocks" data-x="3" data-y="2"></div><div class="blocks" data-x="3" data-y="3"></div><div class="blocks" data-x="3" data-y="4"></div><div class="blocks" data-x="3" data-y="5"></div><div class="blocks" data-x="3" data-y="6"></div><div class="blocks" data-x="3" data-y="7"></div><div class="blocks" data-x="3" data-y="8"></div><div class="blocks" data-x="3" data-y="9"></div><div class="blocks" data-x="3" data-y="10"></div><div class="blocks" data-x="4" data-y="0"></div><div class="blocks" data-x="4" data-y="1"></div><div class="blocks" data-x="4" data-y="2"></div><div class="blocks" data-x="4" data-y="3"></div><div class="blocks" data-x="4" data-y="4"></div><div class="blocks" data-x="4" data-y="5"></div><div class="blocks" data-x="4" data-y="6"></div><div class="blocks" data-x="4" data-y="7"></div><div class="blocks" data-x="4" data-y="8"></div><div class="blocks" data-x="4" data-y="9"></div><div class="blocks" data-x="4" data-y="10"></div><div class="blocks" data-x="5" data-y="0"></div><div class="blocks" data-x="5" data-y="1"></div><div class="blocks" data-x="5" data-y="2"></div><div class="blocks" data-x="5" data-y="3"></div><div class="blocks" data-x="5" data-y="4"></div><div class="blocks" data-x="5" data-y="5"></div><div class="blocks" data-x="5" data-y="6"></div><div class="blocks" data-x="5" data-y="7"></div><div class="blocks" data-x="5" data-y="8"></div><div class="blocks" data-x="5" data-y="9"></div><div class="blocks" data-x="5" data-y="10"></div><div class="blocks" data-x="6" data-y="0"></div><div class="blocks" data-x="6" data-y="1"></div><div class="blocks" data-x="6" data-y="2"></div><div class="blocks" data-x="6" data-y="3"></div><div class="blocks" data-x="6" data-y="4"></div><div class="blocks" data-x="6" data-y="5"></div><div class="blocks" data-x="6" data-y="6"></div><div class="blocks" data-x="6" data-y="7"></div><div class="blocks" data-x="6" data-y="8"></div><div class="blocks" data-x="6" data-y="9"></div><div class="blocks" data-x="6" data-y="10"></div><div class="blocks" data-x="7" data-y="0"></div><div class="blocks" data-x="7" data-y="1"></div><div class="blocks" data-x="7" data-y="2"></div><div class="blocks" data-x="7" data-y="3"></div><div class="blocks" data-x="7" data-y="4"></div><div class="blocks" data-x="7" data-y="5"></div><div class="blocks" data-x="7" data-y="6"></div><div class="blocks" data-x="7" data-y="7"></div><div class="blocks" data-x="7" data-y="8"></div><div class="blocks" data-x="7" data-y="9"></div><div class="blocks" data-x="7" data-y="10"></div><div class="blocks" data-x="8" data-y="0"></div><div class="blocks" data-x="8" data-y="1"></div><div class="blocks" data-x="8" data-y="2"></div><div class="blocks" data-x="8" data-y="3"></div><div class="blocks" data-x="8" data-y="4"></div><div class="blocks" data-x="8" data-y="5"></div><div class="blocks" data-x="8" data-y="6"></div><div class="blocks" data-x="8" data-y="7"></div><div class="blocks" data-x="8" data-y="8"></div><div class="blocks" data-x="8" data-y="9"></div><div class="blocks" data-x="8" data-y="10"></div><div class="blocks" data-x="9" data-y="0"></div><div class="blocks" data-x="9" data-y="1"></div><div class="blocks" data-x="9" data-y="2"></div><div class="blocks" data-x="9" data-y="3"></div><div class="blocks" data-x="9" data-y="4"></div><div class="blocks" data-x="9" data-y="5"></div><div class="blocks" data-x="9" data-y="6"></div><div class="blocks" data-x="9" data-y="7"></div><div class="blocks" data-x="9" data-y="8"></div><div class="blocks" data-x="9" data-y="9"></div><div class="blocks" data-x="9" data-y="10"></div><div class="blocks" data-x="10" data-y="0"></div><div class="blocks" data-x="10" data-y="1"></div><div class="blocks" data-x="10" data-y="2"></div><div class="blocks" data-x="10" data-y="3"></div><div class="blocks" data-x="10" data-y="4"></div><div class="blocks" data-x="10" data-y="5"></div><div class="blocks" data-x="10" data-y="6"></div><div class="blocks" data-x="10" data-y="7"></div><div class="blocks" data-x="10" data-y="8"></div><div class="blocks" data-x="10" data-y="9"></div><div class="blocks" data-x="10" data-y="10"></div></div>

3 个答案:

答案 0 :(得分：2)

这就是你想要的吗？

<强>演示 

$('.blocks').mouseenter(function() {
  var $this = $(this);
  $this.addClass('current');
  setTimeout(function() {
    $this.addClass("Done")
  }, 1900);
});
.playboard {
  width: 330px;
}

.blocks {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: pink;
}

.blocks.current:not(.Done) {
  background-color: grey;
  animation-name: blackWhite;
  animation-duration: 2s;
}

@-webkit-keyframes blackWhite {
  0% {
    background-color: grey;
  }
  50% {
    background-color: grey;
  }
  51% {
    background-color: grey;
  }
  100% {
    background-color: pink;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="playboard">
  <div class="blocks" data-x="0" data-y="0"></div>
  <div class="blocks" data-x="0" data-y="1"></div>
  <div class="blocks" data-x="0" data-y="2"></div>
  <div class="blocks" data-x="0" data-y="3"></div>
  <div class="blocks" data-x="0" data-y="4"></div>
  <div class="blocks" data-x="0" data-y="5"></div>
  <div class="blocks" data-x="0" data-y="6"></div>
  <div class="blocks" data-x="0" data-y="7"></div>
  <div class="blocks" data-x="0" data-y="8"></div>
  <div class="blocks" data-x="0" data-y="9"></div>
  <div class="blocks" data-x="0" data-y="10"></div>
  <div class="blocks" data-x="1" data-y="0"></div>
  <div class="blocks" data-x="1" data-y="1"></div>
  <div class="blocks" data-x="1" data-y="2"></div>
  <div class="blocks" data-x="1" data-y="3"></div>
  <div class="blocks" data-x="1" data-y="4"></div>
  <div class="blocks" data-x="1" data-y="5"></div>
  <div class="blocks" data-x="1" data-y="6"></div>
  <div class="blocks" data-x="1" data-y="7"></div>
  <div class="blocks" data-x="1" data-y="8"></div>
  <div class="blocks" data-x="1" data-y="9"></div>
  <div class="blocks" data-x="1" data-y="10"></div>
  <div class="blocks" data-x="2" data-y="0"></div>
  <div class="blocks" data-x="2" data-y="1"></div>
  <div class="blocks" data-x="2" data-y="2"></div>
  <div class="blocks" data-x="2" data-y="3"></div>
  <div class="blocks" data-x="2" data-y="4"></div>
  <div class="blocks" data-x="2" data-y="5"></div>
  <div class="blocks" data-x="2" data-y="6"></div>
  <div class="blocks" data-x="2" data-y="7"></div>
  <div class="blocks" data-x="2" data-y="8"></div>
  <div class="blocks" data-x="2" data-y="9"></div>
  <div class="blocks" data-x="2" data-y="10"></div>
  <div class="blocks" data-x="3" data-y="0"></div>
  <div class="blocks" data-x="3" data-y="1"></div>
  <div class="blocks" data-x="3" data-y="2"></div>
  <div class="blocks" data-x="3" data-y="3"></div>
  <div class="blocks" data-x="3" data-y="4"></div>
  <div class="blocks" data-x="3" data-y="5"></div>
  <div class="blocks" data-x="3" data-y="6"></div>
  <div class="blocks" data-x="3" data-y="7"></div>
  <div class="blocks" data-x="3" data-y="8"></div>
  <div class="blocks" data-x="3" data-y="9"></div>
  <div class="blocks" data-x="3" data-y="10"></div>
  <div class="blocks" data-x="4" data-y="0"></div>
  <div class="blocks" data-x="4" data-y="1"></div>
  <div class="blocks" data-x="4" data-y="2"></div>
  <div class="blocks" data-x="4" data-y="3"></div>
  <div class="blocks" data-x="4" data-y="4"></div>
  <div class="blocks" data-x="4" data-y="5"></div>
  <div class="blocks" data-x="4" data-y="6"></div>
  <div class="blocks" data-x="4" data-y="7"></div>
  <div class="blocks" data-x="4" data-y="8"></div>
  <div class="blocks" data-x="4" data-y="9"></div>
  <div class="blocks" data-x="4" data-y="10"></div>
  <div class="blocks" data-x="5" data-y="0"></div>
  <div class="blocks" data-x="5" data-y="1"></div>
  <div class="blocks" data-x="5" data-y="2"></div>
  <div class="blocks" data-x="5" data-y="3"></div>
  <div class="blocks" data-x="5" data-y="4"></div>
  <div class="blocks" data-x="5" data-y="5"></div>
  <div class="blocks" data-x="5" data-y="6"></div>
  <div class="blocks" data-x="5" data-y="7"></div>
  <div class="blocks" data-x="5" data-y="8"></div>
  <div class="blocks" data-x="5" data-y="9"></div>
  <div class="blocks" data-x="5" data-y="10"></div>
  <div class="blocks" data-x="6" data-y="0"></div>
  <div class="blocks" data-x="6" data-y="1"></div>
  <div class="blocks" data-x="6" data-y="2"></div>
  <div class="blocks" data-x="6" data-y="3"></div>
  <div class="blocks" data-x="6" data-y="4"></div>
  <div class="blocks" data-x="6" data-y="5"></div>
  <div class="blocks" data-x="6" data-y="6"></div>
  <div class="blocks" data-x="6" data-y="7"></div>
  <div class="blocks" data-x="6" data-y="8"></div>
  <div class="blocks" data-x="6" data-y="9"></div>
  <div class="blocks" data-x="6" data-y="10"></div>
  <div class="blocks" data-x="7" data-y="0"></div>
  <div class="blocks" data-x="7" data-y="1"></div>
  <div class="blocks" data-x="7" data-y="2"></div>
  <div class="blocks" data-x="7" data-y="3"></div>
  <div class="blocks" data-x="7" data-y="4"></div>
  <div class="blocks" data-x="7" data-y="5"></div>
  <div class="blocks" data-x="7" data-y="6"></div>
  <div class="blocks" data-x="7" data-y="7"></div>
  <div class="blocks" data-x="7" data-y="8"></div>
  <div class="blocks" data-x="7" data-y="9"></div>
  <div class="blocks" data-x="7" data-y="10"></div>
  <div class="blocks" data-x="8" data-y="0"></div>
  <div class="blocks" data-x="8" data-y="1"></div>
  <div class="blocks" data-x="8" data-y="2"></div>
  <div class="blocks" data-x="8" data-y="3"></div>
  <div class="blocks" data-x="8" data-y="4"></div>
  <div class="blocks" data-x="8" data-y="5"></div>
  <div class="blocks" data-x="8" data-y="6"></div>
  <div class="blocks" data-x="8" data-y="7"></div>
  <div class="blocks" data-x="8" data-y="8"></div>
  <div class="blocks" data-x="8" data-y="9"></div>
  <div class="blocks" data-x="8" data-y="10"></div>
  <div class="blocks" data-x="9" data-y="0"></div>
  <div class="blocks" data-x="9" data-y="1"></div>
  <div class="blocks" data-x="9" data-y="2"></div>
  <div class="blocks" data-x="9" data-y="3"></div>
  <div class="blocks" data-x="9" data-y="4"></div>
  <div class="blocks" data-x="9" data-y="5"></div>
  <div class="blocks" data-x="9" data-y="6"></div>
  <div class="blocks" data-x="9" data-y="7"></div>
  <div class="blocks" data-x="9" data-y="8"></div>
  <div class="blocks" data-x="9" data-y="9"></div>
  <div class="blocks" data-x="9" data-y="10"></div>
  <div class="blocks" data-x="10" data-y="0"></div>
  <div class="blocks" data-x="10" data-y="1"></div>
  <div class="blocks" data-x="10" data-y="2"></div>
  <div class="blocks" data-x="10" data-y="3"></div>
  <div class="blocks" data-x="10" data-y="4"></div>
  <div class="blocks" data-x="10" data-y="5"></div>
  <div class="blocks" data-x="10" data-y="6"></div>
  <div class="blocks" data-x="10" data-y="7"></div>
  <div class="blocks" data-x="10" data-y="8"></div>
  <div class="blocks" data-x="10" data-y="9"></div>
  <div class="blocks" data-x="10" data-y="10"></div>
</div>

这将在1.5秒后删除current课程。

$('.blocks').mouseenter(function() {
  var $this = $(this);
  $this.addClass('current');
  setTimeout(function() {
    $this.removeClass("current")
  }, 2000);
});

将它与它结合使其随着时间的推移变成多种颜色。

.blocks.current {
  background-color: grey;
  animation-name: blackWhite;
  animation-duration: 2s;
}

@-webkit-keyframes blackWhite {
  0% {
    background-color: white;
  }
  50% {
    background-color: blue;
  }
  51% {
    background-color: grey;
  }
  100% {
    background-color: pink;
  }
}

答案 1 :(得分：0)

＆＃13;
＆＃13; 
$('.blocks').mouseenter(function() {
  $(this).addClass('current');
  setTimeout(function() {
    //$(this).aniamate('.current',null); //this line is not working
  }, 1500);
});
$('.blocks').mouseleave(function() {
  $(this).removeClass('current');
  $(this).animate({
    opacity: 0.5
  }, 'fast', function() {
    $(this)
      .removeClass('current')
      .animate({
        opacity: 1
      });
  });
});
＆＃13; 
.playboard {
  width: 330px;
}

.blocks {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: pink;
}

.blocks.current {
  background-color: grey;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="playboard">
  <div class="blocks" data-x="0" data-y="0"></div>
  <div class="blocks" data-x="0" data-y="1"></div>
  <div class="blocks" data-x="0" data-y="2"></div>
  <div class="blocks" data-x="0" data-y="3"></div>
  <div class="blocks" data-x="0" data-y="4"></div>
  <div class="blocks" data-x="0" data-y="5"></div>
  <div class="blocks" data-x="0" data-y="6"></div>
  <div class="blocks" data-x="0" data-y="7"></div>
  <div class="blocks" data-x="0" data-y="8"></div>
  <div class="blocks" data-x="0" data-y="9"></div>
  <div class="blocks" data-x="0" data-y="10"></div>
  <div class="blocks" data-x="1" data-y="0"></div>
  <div class="blocks" data-x="1" data-y="1"></div>
  <div class="blocks" data-x="1" data-y="2"></div>
  <div class="blocks" data-x="1" data-y="3"></div>
  <div class="blocks" data-x="1" data-y="4"></div>
  <div class="blocks" data-x="1" data-y="5"></div>
  <div class="blocks" data-x="1" data-y="6"></div>
  <div class="blocks" data-x="1" data-y="7"></div>
  <div class="blocks" data-x="1" data-y="8"></div>
  <div class="blocks" data-x="1" data-y="9"></div>
  <div class="blocks" data-x="1" data-y="10"></div>
  <div class="blocks" data-x="2" data-y="0"></div>
  <div class="blocks" data-x="2" data-y="1"></div>
  <div class="blocks" data-x="2" data-y="2"></div>
  <div class="blocks" data-x="2" data-y="3"></div>
  <div class="blocks" data-x="2" data-y="4"></div>
  <div class="blocks" data-x="2" data-y="5"></div>
  <div class="blocks" data-x="2" data-y="6"></div>
  <div class="blocks" data-x="2" data-y="7"></div>
  <div class="blocks" data-x="2" data-y="8"></div>
  <div class="blocks" data-x="2" data-y="9"></div>
  <div class="blocks" data-x="2" data-y="10"></div>
  <div class="blocks" data-x="3" data-y="0"></div>
  <div class="blocks" data-x="3" data-y="1"></div>
  <div class="blocks" data-x="3" data-y="2"></div>
  <div class="blocks" data-x="3" data-y="3"></div>
  <div class="blocks" data-x="3" data-y="4"></div>
  <div class="blocks" data-x="3" data-y="5"></div>
  <div class="blocks" data-x="3" data-y="6"></div>
  <div class="blocks" data-x="3" data-y="7"></div>
  <div class="blocks" data-x="3" data-y="8"></div>
  <div class="blocks" data-x="3" data-y="9"></div>
  <div class="blocks" data-x="3" data-y="10"></div>
  <div class="blocks" data-x="4" data-y="0"></div>
  <div class="blocks" data-x="4" data-y="1"></div>
  <div class="blocks" data-x="4" data-y="2"></div>
  <div class="blocks" data-x="4" data-y="3"></div>
  <div class="blocks" data-x="4" data-y="4"></div>
  <div class="blocks" data-x="4" data-y="5"></div>
  <div class="blocks" data-x="4" data-y="6"></div>
  <div class="blocks" data-x="4" data-y="7"></div>
  <div class="blocks" data-x="4" data-y="8"></div>
  <div class="blocks" data-x="4" data-y="9"></div>
  <div class="blocks" data-x="4" data-y="10"></div>
  <div class="blocks" data-x="5" data-y="0"></div>
  <div class="blocks" data-x="5" data-y="1"></div>
  <div class="blocks" data-x="5" data-y="2"></div>
  <div class="blocks" data-x="5" data-y="3"></div>
  <div class="blocks" data-x="5" data-y="4"></div>
  <div class="blocks" data-x="5" data-y="5"></div>
  <div class="blocks" data-x="5" data-y="6"></div>
  <div class="blocks" data-x="5" data-y="7"></div>
  <div class="blocks" data-x="5" data-y="8"></div>
  <div class="blocks" data-x="5" data-y="9"></div>
  <div class="blocks" data-x="5" data-y="10"></div>
  <div class="blocks" data-x="6" data-y="0"></div>
  <div class="blocks" data-x="6" data-y="1"></div>
  <div class="blocks" data-x="6" data-y="2"></div>
  <div class="blocks" data-x="6" data-y="3"></div>
  <div class="blocks" data-x="6" data-y="4"></div>
  <div class="blocks" data-x="6" data-y="5"></div>
  <div class="blocks" data-x="6" data-y="6"></div>
  <div class="blocks" data-x="6" data-y="7"></div>
  <div class="blocks" data-x="6" data-y="8"></div>
  <div class="blocks" data-x="6" data-y="9"></div>
  <div class="blocks" data-x="6" data-y="10"></div>
  <div class="blocks" data-x="7" data-y="0"></div>
  <div class="blocks" data-x="7" data-y="1"></div>
  <div class="blocks" data-x="7" data-y="2"></div>
  <div class="blocks" data-x="7" data-y="3"></div>
  <div class="blocks" data-x="7" data-y="4"></div>
  <div class="blocks" data-x="7" data-y="5"></div>
  <div class="blocks" data-x="7" data-y="6"></div>
  <div class="blocks" data-x="7" data-y="7"></div>
  <div class="blocks" data-x="7" data-y="8"></div>
  <div class="blocks" data-x="7" data-y="9"></div>
  <div class="blocks" data-x="7" data-y="10"></div>
  <div class="blocks" data-x="8" data-y="0"></div>
  <div class="blocks" data-x="8" data-y="1"></div>
  <div class="blocks" data-x="8" data-y="2"></div>
  <div class="blocks" data-x="8" data-y="3"></div>
  <div class="blocks" data-x="8" data-y="4"></div>
  <div class="blocks" data-x="8" data-y="5"></div>
  <div class="blocks" data-x="8" data-y="6"></div>
  <div class="blocks" data-x="8" data-y="7"></div>
  <div class="blocks" data-x="8" data-y="8"></div>
  <div class="blocks" data-x="8" data-y="9"></div>
  <div class="blocks" data-x="8" data-y="10"></div>
  <div class="blocks" data-x="9" data-y="0"></div>
  <div class="blocks" data-x="9" data-y="1"></div>
  <div class="blocks" data-x="9" data-y="2"></div>
  <div class="blocks" data-x="9" data-y="3"></div>
  <div class="blocks" data-x="9" data-y="4"></div>
  <div class="blocks" data-x="9" data-y="5"></div>
  <div class="blocks" data-x="9" data-y="6"></div>
  <div class="blocks" data-x="9" data-y="7"></div>
  <div class="blocks" data-x="9" data-y="8"></div>
  <div class="blocks" data-x="9" data-y="9"></div>
  <div class="blocks" data-x="9" data-y="10"></div>
  <div class="blocks" data-x="10" data-y="0"></div>
  <div class="blocks" data-x="10" data-y="1"></div>
  <div class="blocks" data-x="10" data-y="2"></div>
  <div class="blocks" data-x="10" data-y="3"></div>
  <div class="blocks" data-x="10" data-y="4"></div>
  <div class="blocks" data-x="10" data-y="5"></div>
  <div class="blocks" data-x="10" data-y="6"></div>
  <div class="blocks" data-x="10" data-y="7"></div>
  <div class="blocks" data-x="10" data-y="8"></div>
  <div class="blocks" data-x="10" data-y="9"></div>
  <div class="blocks" data-x="10" data-y="10"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

＆＃13;
＆＃13; 
.playboard {
  width: 330px;
}

.blocks {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: pink;
  transition: 150ms background-color;
}

.blocks:hover {
  background-color: grey;
}

.blocks.current {
  background-color: grey;
}
＆＃13; 
<div class="playboard">
  <div class="blocks" data-x="0" data-y="0"></div>
  <div class="blocks" data-x="0" data-y="1"></div>
  <div class="blocks" data-x="0" data-y="2"></div>
  <div class="blocks" data-x="0" data-y="3"></div>
  <div class="blocks" data-x="0" data-y="4"></div>
  <div class="blocks" data-x="0" data-y="5"></div>
  <div class="blocks" data-x="0" data-y="6"></div>
  <div class="blocks" data-x="0" data-y="7"></div>
  <div class="blocks" data-x="0" data-y="8"></div>
  <div class="blocks" data-x="0" data-y="9"></div>
  <div class="blocks" data-x="0" data-y="10"></div>
  <div class="blocks" data-x="1" data-y="0"></div>
  <div class="blocks" data-x="1" data-y="1"></div>
  <div class="blocks" data-x="1" data-y="2"></div>
  <div class="blocks" data-x="1" data-y="3"></div>
  <div class="blocks" data-x="1" data-y="4"></div>
  <div class="blocks" data-x="1" data-y="5"></div>
  <div class="blocks" data-x="1" data-y="6"></div>
  <div class="blocks" data-x="1" data-y="7"></div>
  <div class="blocks" data-x="1" data-y="8"></div>
  <div class="blocks" data-x="1" data-y="9"></div>
  <div class="blocks" data-x="1" data-y="10"></div>
  <div class="blocks" data-x="2" data-y="0"></div>
  <div class="blocks" data-x="2" data-y="1"></div>
  <div class="blocks" data-x="2" data-y="2"></div>
  <div class="blocks" data-x="2" data-y="3"></div>
  <div class="blocks" data-x="2" data-y="4"></div>
  <div class="blocks" data-x="2" data-y="5"></div>
  <div class="blocks" data-x="2" data-y="6"></div>
  <div class="blocks" data-x="2" data-y="7"></div>
  <div class="blocks" data-x="2" data-y="8"></div>
  <div class="blocks" data-x="2" data-y="9"></div>
  <div class="blocks" data-x="2" data-y="10"></div>
  <div class="blocks" data-x="3" data-y="0"></div>
  <div class="blocks" data-x="3" data-y="1"></div>
  <div class="blocks" data-x="3" data-y="2"></div>
  <div class="blocks" data-x="3" data-y="3"></div>
  <div class="blocks" data-x="3" data-y="4"></div>
  <div class="blocks" data-x="3" data-y="5"></div>
  <div class="blocks" data-x="3" data-y="6"></div>
  <div class="blocks" data-x="3" data-y="7"></div>
  <div class="blocks" data-x="3" data-y="8"></div>
  <div class="blocks" data-x="3" data-y="9"></div>
  <div class="blocks" data-x="3" data-y="10"></div>
  <div class="blocks" data-x="4" data-y="0"></div>
  <div class="blocks" data-x="4" data-y="1"></div>
  <div class="blocks" data-x="4" data-y="2"></div>
  <div class="blocks" data-x="4" data-y="3"></div>
  <div class="blocks" data-x="4" data-y="4"></div>
  <div class="blocks" data-x="4" data-y="5"></div>
  <div class="blocks" data-x="4" data-y="6"></div>
  <div class="blocks" data-x="4" data-y="7"></div>
  <div class="blocks" data-x="4" data-y="8"></div>
  <div class="blocks" data-x="4" data-y="9"></div>
  <div class="blocks" data-x="4" data-y="10"></div>
  <div class="blocks" data-x="5" data-y="0"></div>
  <div class="blocks" data-x="5" data-y="1"></div>
  <div class="blocks" data-x="5" data-y="2"></div>
  <div class="blocks" data-x="5" data-y="3"></div>
  <div class="blocks" data-x="5" data-y="4"></div>
  <div class="blocks" data-x="5" data-y="5"></div>
  <div class="blocks" data-x="5" data-y="6"></div>
  <div class="blocks" data-x="5" data-y="7"></div>
  <div class="blocks" data-x="5" data-y="8"></div>
  <div class="blocks" data-x="5" data-y="9"></div>
  <div class="blocks" data-x="5" data-y="10"></div>
  <div class="blocks" data-x="6" data-y="0"></div>
  <div class="blocks" data-x="6" data-y="1"></div>
  <div class="blocks" data-x="6" data-y="2"></div>
  <div class="blocks" data-x="6" data-y="3"></div>
  <div class="blocks" data-x="6" data-y="4"></div>
  <div class="blocks" data-x="6" data-y="5"></div>
  <div class="blocks" data-x="6" data-y="6"></div>
  <div class="blocks" data-x="6" data-y="7"></div>
  <div class="blocks" data-x="6" data-y="8"></div>
  <div class="blocks" data-x="6" data-y="9"></div>
  <div class="blocks" data-x="6" data-y="10"></div>
  <div class="blocks" data-x="7" data-y="0"></div>
  <div class="blocks" data-x="7" data-y="1"></div>
  <div class="blocks" data-x="7" data-y="2"></div>
  <div class="blocks" data-x="7" data-y="3"></div>
  <div class="blocks" data-x="7" data-y="4"></div>
  <div class="blocks" data-x="7" data-y="5"></div>
  <div class="blocks" data-x="7" data-y="6"></div>
  <div class="blocks" data-x="7" data-y="7"></div>
  <div class="blocks" data-x="7" data-y="8"></div>
  <div class="blocks" data-x="7" data-y="9"></div>
  <div class="blocks" data-x="7" data-y="10"></div>
  <div class="blocks" data-x="8" data-y="0"></div>
  <div class="blocks" data-x="8" data-y="1"></div>
  <div class="blocks" data-x="8" data-y="2"></div>
  <div class="blocks" data-x="8" data-y="3"></div>
  <div class="blocks" data-x="8" data-y="4"></div>
  <div class="blocks" data-x="8" data-y="5"></div>
  <div class="blocks" data-x="8" data-y="6"></div>
  <div class="blocks" data-x="8" data-y="7"></div>
  <div class="blocks" data-x="8" data-y="8"></div>
  <div class="blocks" data-x="8" data-y="9"></div>
  <div class="blocks" data-x="8" data-y="10"></div>
  <div class="blocks" data-x="9" data-y="0"></div>
  <div class="blocks" data-x="9" data-y="1"></div>
  <div class="blocks" data-x="9" data-y="2"></div>
  <div class="blocks" data-x="9" data-y="3"></div>
  <div class="blocks" data-x="9" data-y="4"></div>
  <div class="blocks" data-x="9" data-y="5"></div>
  <div class="blocks" data-x="9" data-y="6"></div>
  <div class="blocks" data-x="9" data-y="7"></div>
  <div class="blocks" data-x="9" data-y="8"></div>
  <div class="blocks" data-x="9" data-y="9"></div>
  <div class="blocks" data-x="9" data-y="10"></div>
  <div class="blocks" data-x="10" data-y="0"></div>
  <div class="blocks" data-x="10" data-y="1"></div>
  <div class="blocks" data-x="10" data-y="2"></div>
  <div class="blocks" data-x="10" data-y="3"></div>
  <div class="blocks" data-x="10" data-y="4"></div>
  <div class="blocks" data-x="10" data-y="5"></div>
  <div class="blocks" data-x="10" data-y="6"></div>
  <div class="blocks" data-x="10" data-y="7"></div>
  <div class="blocks" data-x="10" data-y="8"></div>
  <div class="blocks" data-x="10" data-y="9"></div>
  <div class="blocks" data-x="10" data-y="10"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

使用Pure Css。

相关问题
最新问题