<h1>cssだけでルーレット</h1>

<div id="roulette">
	
	<input type="checkbox" class="start_btn" id="start_check" />
	<label class="act-start" for="start_check">
		<span></span>
	</label>
	
	<div class="rltt-body">
		<div class="hari"></div>
		<div class="rltt">
			<div class="ban pink fas"></div>
			<div class="ban blue fas"></div>
			<div class="ban pink fas"></div>
			<div class="ban blue fas"></div>
			<div class="ban pink fas"></div>
			<div class="ban blue fas"></div>
			<div class="banlabel">
				<div class="labelgroup">
					<div><i class="fas fa-star"></i></div>
					<div><i class="fas fa-star"></i></div>
				</div>
				<div class="labelgroup">
					<div><i class="fas fa-star"></i></div>
					<div><i class="fas fa-star"></i></div>
				</div>
				<div class="labelgroup">
					<div><i class="fas fa-star"></i></div>
					<div><i class="fas fa-star"></i></div>
				</div>
			</div>
		</div>
	</div>
	
</div>
:root{
	--blue:#8BB8D6;
	--pink:#FA6E59;
	--orange:#F8A055;
	
	--ban-size:400px;
	--ban-teihen-width:108px;
}
body{
	overflow:hidden;
}
div{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

h1{
	font-size:100%;
	margin-top:0;
}

@keyframes roulette{
	0%{
		transform:rotate(0deg);
	}
	50%{
		transform:rotate(180deg);
	}
	100%{
		transform:rotate(360deg);
	}
}

@keyframes roulettehari{
	0%{
		border-top-color: rgba(248,160,85,1);
	}
	50%{
		border-top-color: rgba(248,201,85,1);
	}
	100%{
		border-top-color: rgba(248,160,85,1);
	}
}
@keyframes roulettebtn{
	0%{
		background: rgba(248,160,85,1);
	}
	50%{
		background: rgba(248,201,85,1);
	}
	100%{
		background: rgba(248,160,85,1);
	}
}
h1{ text-align:center; }
#roulette{
	width:var(--ban-size);
	margin:0 auto;
}

/* ルーレットのボタン */
.act-start{
	display:block;
	margin-bottom:40px;
	margin-right:auto;
	margin-left:auto;
	width:calc(var(--ban-size) * 0.7);
	height:1.8em;
	border-radius:0.25em;
	padding:20px;
	background:var(--orange);
	animation:roulettebtn 0.5s ease-in infinite ;
	animation-play-state:paused;
}
.start_btn:checked + .act-start{
	animation-play-state:running;
}
.act-start span,
.start_btn + .act-start span:before{
	display:block;
	width:100%; height:100%;
	
}
.start_btn{
	display:none;
}
.start_btn + .act-start span:before{
	content:"スタート!";
	line-height:1.8em;
	vertical-align:middle;
	text-align:center;
}

.start_btn:checked + .act-start span:before{
	content:"ストップ!";
}


#roulette .rltt-body{
	position:relative;
	width:var(--ban-size);
}
/* ルーレットの針 */
#roulette .hari{
	position:absolute;
	margin-right:auto;
	margin-left:auto;
	right:0; left:0;
	top:-20px; bottom:0;
	z-index:10;
	width:0; height:0;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	border-top:80px solid var(--orange);
	animation:roulettehari 0.5s ease-in infinite;
	animation-play-state:paused;
}

#roulette .start_btn:checked + .act-start + .rltt-body .hari{
	animation-play-state:running;
}

#roulette .rltt{
	position:relative;
	width:var(--ban-size);
	height:var(--ban-size);
	overflow:hidden;
	background:#fff;
	border-radius:var(--ban-size);
	animation:
		roulette 1s linear forwards infinite,
		neonshadow 1s linear infinite;
	animation-play-state:paused;
}

#roulette .start_btn:checked + .act-start + .rltt-body .rltt{
	animation-play-state:running;
}

#roulette .rltt .ban,
#roulette .rltt .labelgroup{
	position:absolute;
	top:0; bottom:0;
	left:0; right:0;
	margin:auto;
	height:var(--ban-size);
	width:var(--ban-teihen-width);
}

/* ★のラベルを配置したい */
#roulette .rltt .labelgroup div{
	margin:0;
	height:calc(var(--ban-size) / 2);
	text-align:center;
	padding-top:0.5em;
	opacity:0.5;
	font-size:120%;
	color:#fff;
}
#roulette .rltt .labelgroup div:nth-child(2){
	transform:rotate(180deg);
}

#roulette .rltt .labelgroup:nth-child(1){ transform:rotate(0deg); }
#roulette .rltt .labelgroup:nth-child(2){ transform:rotate(60deg); }
#roulette .rltt .labelgroup:nth-child(3){ transform:rotate(120deg); }


#roulette .rltt .ban:before{
	content:"";
	display:block;
	width:0;
	height:0;
	border-left:calc(var(--ban-teihen-width) / 2) solid transparent;
	border-right:calc(var(--ban-teihen-width) / 2) solid transparent;
	border-top:calc(var(--ban-size) / 2) solid var(--pink);
	
}
#roulette .rltt .ban:after{
	content:"";
	display:block;
	width:0;
	height:0;
	border-left:calc(var(--ban-teihen-width) / 2) solid transparent;
	border-right:calc(var(--ban-teihen-width) / 2) solid transparent;
	border-bottom:calc(var(--ban-size) / 2) solid var(--pink);
	
}

/* 青の盤の場合は色を変更する */
#roulette .rltt .ban.blue:before{ border-top-color:var(--blue); }
#roulette .rltt .ban.blue:after{ border-bottom-color:var(--blue); }


/* 回転させる */
#roulette .rltt .ban:nth-child(2){transform:rotate(30deg);}
#roulette .rltt .ban:nth-child(3){transform:rotate(60deg);}
#roulette .rltt .ban:nth-child(4){transform:rotate(90deg);}
#roulette .rltt .ban:nth-child(5){transform:rotate(120deg);}
#roulette .rltt .ban:nth-child(6){transform:rotate(150deg);}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://kit.fontawesome.com/b6ad2a1f1b.js