Untitled

dabblet.css

html, body
{
	min-height: 100%;
	background: linear-gradient(top, rgba(254, 235, 138, 1) 0, rgba(253, 220, 100, 1) 100%);
}

.close
{
	font-size: 14px;
	position: absolute;
	left: 50%;
	top: 50%;
	
	border: 1px solid red;
	width: 4em;
	height: 4em;	

	
	transform: translate(0, -50%);
}

.left
{
	position: absolute;
	left: 0;
	top: 0;
	width: 50%;
	height: 100%;
	overflow: hidden;

}

.right
{
	position: absolute;
	right: 0;
	top: 0;
	width: 50%;
	height: 100%;
	overflow: hidden;
}

.i
{
	position: absolute; 
	border-radius: 100%;
	top: 0;
	bottom: 0;
	overfow: hidden;
	transition: transform 1s linear;
	transform: rotate(0deg);
}

.left .i 
{
	left: 0;
	right: -100%;
}

.right .i
{
	left: -100%;
	right: 0;
}

.close:hover .left .i
{
	transform: rotate(180deg);
}

.i .i2
{
	position: absolute;
	left: 0;
	right: 50%;
	top:0;
	bottom:0;
	overflow: hidden;
}


.i .i2:before
{
	content: '';
	position: absolute;
	border: .3em solid green;
	border-right: none;
	left: 0;
	right: -100%;
	top: 0;
	bottom: 0;
	border-radius: 100%;
}

dabblet.html

<div class="close">
	<div class="left">
		<div class="i">
			<div class="i2"></div>
		</div>
	</div>
	<div class="right">
		<div class="i">
			<div class="i2"></div>
		</div>
	</div>
</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}