方块状涂鸦板

把鼠标移动到画板上去吧

scribble

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1828
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body, html {
  background: white;
  width: 100%;
  min-height: 100%;
  height: 100%;
  margin: 0;
  padding: 0; }

h1 {
  font-size: 30px;
  font-family: sans-serif;
  text-align: center; }

p {
  font-szie: 14px;
  font-family: sans-serif;
  text-align: center; }

.content {
  width: 500px;
  height: 500px;
  margin: auto;
  margin-top: 30px; }

.square {
  width: 10%;
  height: 10%;
  float: left;
  background-color: tomato;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-appearance: none;
  margin: 0;
  outline: none; }

.square:hover {
  background-color: #ffd88a;
  -webkit-transition: all 0.2s;
  transition: all 0.2s; }

.square:checked {
  outline: none;
  background-color: #ffb9ad !important;
  -webkit-transition: all 0.2s;
  transition: all 0.2s; }

.square:checked:hover {
  background-color: #ffd88a !important;
  -webkit-transition: all 0.2s !important;
  transition: all 0.2s !important; }

.square:checked + .square:nth-of-type(2n+0) {
  background-color: black; }

.square:checked + .square:nth-of-type(2n+0):hover {
  background-color: #ffd88a !important;
  -webkit-transition: all 0.2s !important;
  transition: all 0.2s !important; }

.square:checked ~ .square:checked:nth-of-type(4n+7) {
  background-color: teal !important; }

.square:checked ~ .square:checked:nth-of-type(4n+7):hover {
  background-color: #ffd88a !important;
  -webkit-transition: all 0.2s !important;
  transition: all 0.2s !important; }

HTML

<h1>Checkbox scribble</h1>
<p>Just hover and have fun!</p>
<div class='content'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
  <input class='square' type='checkbox'>
</div>

把鼠标移动到画板上去吧

scribble

编辑器支持Emmet

快捷键

把鼠标移动到画板上去吧

scribble

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：