hanfeisun/dabblet.css

## dabblet.css
div.circle {
	height: 134px;
	width: 134px;
	background-color: #000;
	margin: 50vh auto 0;
	transform: translateY(-50%);
	border-radius: 50%;
	animation-name: expand;
	animation-duration: 2s;
	animation-timing-function: ease-in;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	overflow: hidden;

}

div.hint {
	position: absolute;
	top: 80%;
	left: 50%;
	transform: translateX(-50%);
	font-size: 35px;
	font-family: "Hiragino Kaku Gothic StdN";
	text-align: center;
}

@keyframes expand {
	from {height:134px; width: 134px;}
	to {height:1000px; width:1000px;}
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->

<div class="circle"></div>
<div class="hint">触摸画面正中的形状</div>

## dabblet.js
// alert('Hello world!');

## settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	div.circle {
	height: 134px;
	width: 134px;
	background-color: #000;
	margin: 50vh auto 0;
	transform: translateY(-50%);
	border-radius: 50%;
	animation-name: expand;
	animation-duration: 2s;
	animation-timing-function: ease-in;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	overflow: hidden;

	}

	div.hint {
	position: absolute;
	top: 80%;
	left: 50%;
	transform: translateX(-50%);
	font-size: 35px;
	font-family: "Hiragino Kaku Gothic StdN";
	text-align: center;
	}

	@keyframes expand {
	from {height:134px; width: 134px;}
	to {height:1000px; width:1000px;}
	}
	<!-- content to be placed inside <body>…</body> -->

	<div class="circle"></div>
	<div class="hint">触摸画面正中的形状</div>