html css如何画图,HTML + CSS 实现画图板

HTML代码如下

var getContainer = document.getElementsByClassName('container')[0];

var createDiv = '';

for(var i = 0;i < 2006;i++){

createDiv += '

}

getContainer.innerHTML = createDiv;

CSS代码如下

*{

margin: 0px;

padding: 0px;

}

.container{

width: 100%;

height: 816px;

background-color: #111;

}

.container .box{

width: 24px;

height: 24px;

border: 1px solid rgba(0,0,0,.2);

box-sizing: border-box;

float: left;

position: relative;

}

.container .box::before{

content: '';

position: absolute;

top: 4px;

bottom: 4px;

left: 4px;

right: 4px;

background: #1d1d1d;

box-shadow: 0 1px 4px #000;

transition: 20s ease-in-out;

}

.container .box:hover::before{

transition: 0s ease-in-out;

}

.container .box:nth-child(9n+1):hover::before{

background: #f00;

box-shadow: 0 0 3px #f00,0 0 10px #f00;

}

.container .box:nth-child(9n+2):hover::before{

background: #0f0;

box-shadow: 0 0 3px #0f0,0 0 10px #0f0;

}

.container .box:nth-child(9n+3):hover::before{

background: #00f;

box-shadow: 0 0 3px #00f,0 0 10px #00f;

}

.container .box:nth-child(9n+4):hover::before{

background: #ff0;

box-shadow: 0 0 3px #ff0,0 0 10px #ff0;

}

.container .box:nth-child(9n+5):hover::before{

background: #0ff;

box-shadow: 0 0 3px #0ff,0 0 10px #0ff;

}

.container .box:nth-child(9n+6):hover::before{

background: #f0f;

box-shadow: 0 0 3px #f0f,0 0 10px #f0f;

}

.container .box:nth-child(9n+7):hover::before{

background: #00ffad;

box-shadow: 0 0 3px #00ffad,0 0 10px #00ffad;

}

.container .box:nth-child(9n+8):hover::before{

background: #e91e63;

box-shadow: 0 0 3px #e91e63,0 0 10px #e91e63;

}

.container .box:nth-child(9n+9):hover::before{

background: #f45510;

box-shadow: 0 0 3px #f45510,0 0 10px #f45510;

}