Paradise Lost

dabblet.css

/**
 * Paradise Lost
 */

* {margin: 0; padding: 0;}
html, body {height: 100%;}

@-webkit-keyframes rotate {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}


@-webkit-keyframes syncing {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(180deg);
	}
}


@-webkit-keyframes check-and-disappear {
	from {
		width: 0px;
	}
	
	45% {
		width: 10px;
	}
	
	60% {
		width: 10px;
		opacity: 1;
	}
	
	to {
		width: 10px;
		opacity: 0;
	}
}


@-moz-keyframes rotate {
	from {
		-moz-transform: rotate(0deg);
	}
	to {
		-moz-transform: rotate(360deg);
	}
}


@-moz-keyframes syncing {
	from {
		-moz-transform: rotate(0deg);
	}
	to {
		-moz-transform: rotate(180deg);
	}
}


@-moz-keyframes check-and-disappear {
	from {
		width: 0px;
	}
	
	45% {
		width: 10px;
	}
	
	60% {
		width: 10px;
		opacity: 1;
	}
	
	to {
		width: 10px;
		opacity: 0;
	}
}


body {
	background:#000;
	overflow: hidden;
}

small a {
	position: absolute;
	bottom: 20px;
	right: 20px;
	font-size: 11px;
	font-family: Georgia, serif;
	font-style: italic;
	text-decoration: none;
	color: #fff;
	border-bottom: 1px solid transparent;
}

	small a:hover {
		border-bottom: 1px dotted;
	}

.bigone {
	position: absolute;
	width: 50%;
	height: 100%;
	left: 0;
	top: 0;
	background: #d1e3ab;
}

.bigone.right {
	left: auto;
	right: 0;
	background: #297689;
}


.circle {
	width: 63px;
	height: 63px;
	background: rgba(255,255,255,.24);
	position: fixed;
	left: 50%;
	top: 50%;
	opacity: 1;
	border-radius: 32px;
	-webkit-transition: opacity .5s ease-in-out 0s, margin-top .5s ease-in-out 0s;
	-moz-transition: opacity .5s ease-in-out 0s, margin-top .5s ease-in-out 0s;
}

	.left .circle {margin-left: -133px;}
	.right .circle {margin-left: 70px; background: rgba(255,255,255,.08);}
	
	.circle.tiny {
		width: 23px;
		height: 23px;
		position: absolute;
		top: -2px;
		left: -2px;
		margin: 0;
		-webkit-transform-origin: 7px center;
		-webkit-animation: rotate 1s infinite;
		-webkit-animation-timing-function: linear;
		
		-moz-transform-origin: 7px center;
		-moz-animation: rotate 1s infinite;
		-moz-animation-timing-function: linear;
	}
	
	.right .circle.tiny {
		top: auto;
		left: auto;
		bottom: -3px;
		right: -12px;
		-webkit-transform-origin: 8px center;
		-webkit-animation-direction: reverse;
		-webkit-animation-duration: 1.1s;
		
		-moz-transform-origin: 8px center;
		-moz-animation-direction: reverse;
		-moz-animation-duration: 1.1s;
	}
	
	
	.cloud {
		width: 32px;
		height: 22px;
		background: url(http://lab.aqro.be/intro/clouds.png) no-repeat 0 0;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -11px 0 0 -16px;
	}
	.right .cloud {background-position: 0px -22px;}
	
	.sync {
		display: inline-block;
		width: 14px;
		height: 10px;
		background: url(http://lab.aqro.be/intro/sync.png) no-repeat;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -4px 0 0 -6px;
		-webkit-animation: syncing .9s infinite;
		-webkit-animation-timing-function: ease-in-out;
		
		-moz-animation: syncing .9s infinite;
		-moz-animation-timing-function: ease-in-out;
	}
	
	
	.check {
		display: inline-block;
		width: 0px;
		height: 10px;
		background: url(http://lab.aqro.be/intro/check.png) no-repeat;
		position: absolute;
		opacity: 1;
		top: 50%;
		left: 50%;
		margin: -4px 0 0 -4px;
		-webkit-animation: check-and-disappear 1.8s infinite;
		-moz-animation: check-and-disappear 1.8s infinite;
	}

dabblet.html

<section class="bigone left">
	<div class="circle">
		<div class="cloud">
			<small class="sync"></small>
		</div>
		<div class="circle tiny"></div>
	</div>
</section>
<section class="bigone right">
	<div class="circle">
		<div class="cloud">
			<small class="check"></small>
		</div>
		<div class="circle tiny"></div>
	</div>
</section>

dabblet.js

// alert('Hello world!');

settings.json

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