<form>
	<input class="sf" type="checkbox" name="speed" value="is_fast">
</form>
// * Colors * 
// shared colors
$w: rgb(255,255,255);
$wT: rgba(255,255,255,0);

// tire colors
$bk: rgb(0,0,0);
$bkT: rgba(0,0,0,0);

$lgr: rgb(180,177,176);
$lgrT: rgba(180,177,176,0);

$gr: rgb(90,88,86);
$grT: rgba(90,88,86,0);

$dgr: rgb(45,44,43);
$dgrT: rgba(45,44,43,0);

// fire colors
$y: rgb(255,224,0);
$yT: rgba(255,224,0,0);

$o: rgb(255,144,0);
$oT: rgba(255,144,0,0);

$do: rgb(255,76,0);
$doT: rgba(255,76,0,0);

// scene colors
$bl: rgb(192,248,248);

$gb: rgb(182,199,199);

$r: rgb(255,126,126);

$lm: rgb(194,255,161);

$p: rgb(168,160,190);
$pT: rgba(168,160,190,0);

$lp: rgb(188,180,210);
$lpT: rgba(188,180,210,0);

// Animation
$dur: 0.4s;

// Styles
*, *:before, *:after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	font-size: calc(60px + (84  - 60) * (100vw - 320px)/(960 - 320));
}
body {
	background-color: rgb(34,136,34);
	font: 1em "Helvetica Neue", Helvetica, sans-serif;
	line-height: 1.5;
}
input {
	display: inline-block;
}
form {
	margin-top: 1.5em;
	text-align: center;	
}
.sf {
	background:
		/* stripes */
		repeating-linear-gradient(90deg,$r,$r 0.5em,$w 0.5em,$w 1em) 0 0.5em / 100% 0.1em,
		repeating-linear-gradient(120deg,$r,$r 0.29em,$w 0.3em,$w 0.59em,$r 0.6em) 0 0.8em / 100% 0.1em,
		/* road lines */
		repeating-linear-gradient(120deg,$w,$w 0.49em,$wT 0.5em,$wT 0.99em,$w 1em) 0 1.2em / 100% 0.05em,
		/* mountains */
		radial-gradient(100% 200% at 50% 100%,$p 49%,$pT 50%) -0.1em 0.27em / 1.5em 0.23em,
		radial-gradient(100% 200% at 50% 100%,$lp 49%,$lpT 50%) 0.8em 0.27em / 1.5em 0.23em,
		radial-gradient(100% 200% at 50% 100%,$p 49%,$pT 50%) 1.8em 0.27em / 1.5em 0.23em,
		/* clouds */
		radial-gradient(150% 200% at 50% 100%,$w 49%,$wT 50%) 0em 0.16em / 0.75em 0.2em,
		radial-gradient(150% 200% at 50% 100%,$w 49%,$wT 50%) 0.75em 0.16em / 0.75em 0.2em,
		radial-gradient(150% 200% at 50% 100%,$w 49%,$wT 50%) 1.5em 0.16em / 0.75em 0.2em,
		radial-gradient(150% 200% at 50% 100%,$w 49%,$wT 50%) 2.25em 0.16em / 0.75em 0.2em,
		/* road, grass, sky */
		linear-gradient($bl 0.6em,$lm 0.6em,$lm 0.9em,$gb 0.9em);
	background-repeat: no-repeat;
	box-shadow: 0 0.05em 0 0.05em rgba(0,0,0,0.2) inset, 0 0 0 0.05em rgba(255,255,255,0.2);
	font-size: 1em;
	position: relative;
	width: 3em;
	height: 1.5em;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	z-index: 0;
	&, &:before {
		border-radius: 0.75em;
	}
	&:before, &:after {
		content: "";
		display: block;
		position: absolute;
	}
	&:before {
		background:
			/* Center to outer tire */
			radial-gradient(1.3em 1.3em at 50% 50%,$lgr 0.07em,$gr 0.08em,$gr 0.11em,$lgr 0.12em,$lgr 0.19em,$gr 0.2em,$gr 0.24em,$grT 0.25em,$grT 0.34em,$dgr 0.35em,$dgr 0.39em,$lgr 0.4em,$lgr 0.49em,$dgr 0.5em,$dgr 0.65em,$dgrT 0.67em),
			/* 8 holes */
			radial-gradient(0.12em 0.12em at 0.65em 0.35em,$bk 48%,$bkT 50%),
			radial-gradient(0.12em 0.12em at 0.86em 0.44em,$bk 48%,$bkT 50%),
			radial-gradient(0.12em 0.12em at 0.95em 0.65em,$bk 48%,$bkT 50%),
			radial-gradient(0.12em 0.12em at 0.86em 0.86em,$bk 48%,$bkT 50%),
			radial-gradient(0.12em 0.12em at 0.65em 0.95em,$bk 48%,$bkT 50%),
			radial-gradient(0.12em 0.12em at 0.44em 0.86em,$bk 48%,$bkT 50%),
			radial-gradient(0.12em 0.12em at 0.35em 0.65em,$bk 48%,$bkT 50%),
			radial-gradient(0.12em 0.12em at 0.44em 0.44em,$bk 48%,$lgr 50%);
		background-repeat: no-repeat;
		transition: left $dur linear, transform $dur linear;
		transform: rotate(0.5turn);
		top: 0.1em;
		left: 0.1em;
		width: 1.3em;
		height: 1.3em;
		z-index: 2;
	}
	&:after {
		background-image:
			/* white */
			radial-gradient(0.7em 0.22em at 85% 37%, $w 49%, $wT 50%),
			radial-gradient(1.2em 0.3em at 90% 52%, $w 49%, $wT 50%),
			radial-gradient(0.6em 0.26em at 85% 68%, $w 49%, $wT 50%),
			/* yellow */
			radial-gradient(0.9em 0.27em at 85% 35%, $y 49%, $yT 50%),
			radial-gradient(1.6em 0.4em at 90% 52%, $y 49%, $yT 50%),
			radial-gradient(0.8em 0.25em at 83% 70%, $y 49%, $yT 50%),
			/* orange */
			radial-gradient(1em 0.3em at 76% 31%, $o 49%, $oT 50%),
			radial-gradient(2em 0.5em at 90% 52%, $o 49%, $oT 50%),
			radial-gradient(1.1em 0.3em at 79% 73%, $o 49%, $oT 50%),
			/* red-orange */
			radial-gradient(1.4em 0.4em at 70% 25%, $do 49%, $doT 50%),
			radial-gradient(2.9em 0.7em at 100% 52%, $do 49%, $doT 50%),
			radial-gradient(1.6em 0.35em at 75% 76%, $do 49%, $doT 50%);
		background-size: 1.5em 1.5em;
		background-repeat: no-repeat;
		top: 0;
		left: 0;
		width: 1.5em;
		height: 1.5em;
		opacity: 0;
		transition: transform $dur cubic-bezier(.33,.08,1,.9), opacity $dur linear;
		transform: scale(0.25,0.5) {
			origin: 0 50%;
		};
		z-index: 1;
	}
	&:checked {
		&:before {
			animation: spin $dur cubic-bezier(.47,.04,.8,.39);
			left: 1.6em;
			transition: left $dur cubic-bezier(.76,-0.6,.15,1);
			transform: rotate(1turn);
		}
		&:after {
			opacity: 1;
			transform: scale(1.45,1.15);
			transition: transform $dur cubic-bezier(.76,-0.6,.15,1), opacity 0s ($dur*0.4) linear;
		}
	}
	&:focus {
		outline: transparent;
	}
}

/* Animations */
@keyframes spin {
	from {transform: rotate(0)}
	to {transform: rotate(1turn)}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.