Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
	list-style:none;
}
body,html {
	width:100%;
	height:100%;
}
canvas {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	background:#fdd69f;
}
input {
	border:none;
	outline:none;
	padding:3px 5px;
	color:#fff;
	background:plum;
	position:fixed;
	position:absolute;
	top:20px;
	left:50px;
	z-index:5;
}
.box {
	width:600px;
	height:600px;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	background:#fdd69f;
	box-shadow:0 0 0 900px rgba(0,0,0,0.8);
	transform:scale(0,0);
	transition:all 0.7s;
}
.active {
	transform:scale(1,1);
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.4
 立即下载

canvas 五子棋

0