div+css实现哈利波特蛇怪和扫帚摇色子游戏代码
代码语言：html
所属分类：游戏
代码描述：div+css实现哈利波特蛇怪和扫帚摇色子游戏代码，可以多人一起玩耍。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@charset "UTF-8";
/***** dice animation */
@import url("https://fonts.googleapis.com/css?family=Dosis|Roboto");
@keyframes changeOrder {
from {
z-index: 6;
}
to {
z-index: 1;
}
}
@-webkit-keyframes changeOrder {
from {
z-index: 6;
}
to {
z-index: 1;
}
}
input {
display: none;
}
body {
font-size: 16px;
font-family: Dosis, Roboto, Arial, Verdana, sans-serif;
padding: 0;
margin: 0;
border: 0;
background: #8526;
}
.scrim {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.75);
z-index: 999;
}
.scrim .box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
background: white;
border-radius: 3px;
box-shadow: 0 1.5em 0.5em -1em rgba(0, 0, 0, 0.25);
width: 70%;
max-width: 375px;
}
.scrim .box > div {
padding: 1rem;
}
.scrim .box h1 {
font-family: "Harry Potter";
text-shadow: 0 -2px #741, 0 -1px #741, -1px -1px #741, 1px -1px #741, -1px -2px #741, 1px -2px #741, -2px -2px #741, 2px -2px #741, -4px -2px #741, 4px -2px #741;
margin-top: 0;
margin-bottom: 0;
font-size: 1.75rem;
font-weight: 400;
text-align: center;
height: 2.5rem;
line-height: 2.35rem;
background: #741;
color: white;
border-radius: 3px 3px 0px 0px;
}
.scrim .box h2 {
margin-top: 1rem;
margin-bottom: 0.15rem;
font-size: 1.3rem;
}
.scrim .box h2:first-child {
margin-top: 0;
}
.scrim .box p:first-child {
margin-top: 0;
}
.scrim .box p:last-child {
margin-bottom: 0;
}
.flex {
display: flex;
}
.flex > label, .flex > div {
flex: 1;
margin-left: 0.3rem;
}
.flex > label:first-child, .flex > div:first-child {
margin-left: 0;
}
/** start screen: configuration **/
#options {
background: rgba(0, 0, 0, 0);
}
#options .option-players label, #options label.option-start {
display: block;
margin-top: 0.5rem;
color: white;
background: rgba(0, 150, 48, 0.6);
text-align: center;
padding: 6px;
transition: background 0.5s, color 0.5s;
box-sizing: border-box;
border: 2px solid transparent;
border-radius: 3px;
cursor: pointer;
}
#options .option-players label:hover, #options label.option-start:hover {
background: rgba(220, 220, 0, 0.7);
color: black;
}
#options .option-players label:active, #options label.option-start:active {
border: 2px solid rgba(0, 0, 0, 0.1);
}
#options .option-players label.option-start, #options label.option-start.option-start {
background: #741;
color: white;
margin-top: 2rem;
}
#options .option-players label.option-start:hover, #options label.option-start.option-start:hover {
background: #61370e;
}
#options .option-colors label {
height: 2rem;
opacity: 0.6;
margin-bottom: 0.3rem;
cursor: pointer;
transition: opacity 0.5s;
}
#options .option-colors label:hover {
opacity: 0.8;
}
#options .option-colors label span {
box-sizing: border-box;
width: 2rem;
margin-left: 0.3rem;
border-radius: 3px;
display: inline-block;
padding: 3px;
font-size: 0.7rem;
border: 1px solid #222;
}
#options .option-colors label span:first-child {
width: 2rem;
height: 2rem;
border: 0;
}
#options .option-colors label span:first-child::before {
content: "";
display: block;
width: 100%;
height: 100%;
background: radial-gradient(farthest-side, #0000 40%, #321a 0 50%, #0000 0);
}
#options .option-colors label:nth-child(1) span:nth-child(2) {
background: linear-gradient(69deg, #0000 30%, #da8 0 70%, #0000 0) no-repeat 27% 20%/10% 7%, conic-gradient(at 90% 100%, #0000 320deg, #da8 0 350deg, #0000 0) no-repeat 25% 27%/10% 7%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 22% 50%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 72% 50%/5% 5%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 20% 55%/20% 20%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 80% 55%/20% 20%, linear-gradient(to right, #000 7%, #0000 0 43%, #000 0 57%, #0000 0 93%, #000 0) no-repeat 0 52%/100% 2.5%, radial-gradient(circle at 25% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, radial-gradient(circle at 75% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, repeating-linear-gradient(to right, brown 0 20%, gold 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat -52% -60%/52% 60%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 300% -58%/90% 56%, radial-gradient(farthest-side, #fca 99.9%, #0000 0) no-repeat 320% -50%/90% 55%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 500% -52%/95% 55%, linear-gradient(#fca 0 0);
}
#options .option-colors label:nth-child(1) span:nth-child(3) {
background: linear-gradient(5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 15% 30%/30% 5%, linear-gradient(-5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 85% 30%/30% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, green 0 20%, #eee 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, linear-gradient(#f8d8b8 0 0);
}
#options .option-colors label:nth-child(1) span:nth-child(4) {
background: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, #203aa0 0 20%, #b94 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(circle at 100% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 13.5% 45%/20% 10%, radial-gradient(circle at 0% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 87% 45%/20% 10%, linear-gradient(#ffe8b8 0 0);
}
#options .option-colors label:nth-child(1) span:nth-child(5) {
background: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 48%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 48%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 53%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 53%/20% 20%, repeating-linear-gradient(to right, #222 0 20%, #fd0 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0), radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -250% -70%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 300% -70%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(farthest-side at 52% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 18% 32%/30% 10%, radial-gradient(farthest-side at 49% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 82% 32%/30% 10%, linear-gradient(#963 0 0);
}
#options .option-colors label:nth-child(2) span:nth-child(2) {
background: linear-gradient(5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 15% 30%/30% 5%, linear-gradient(-5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 85% 30%/30% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, green 0 20%, #eee 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, linear-gradient(#f8d8b8 0 0);
}
#options .option-colors label:nth-child(2) span:nth-child(3) {
background: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, #203aa0 0 20%, #b94 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(circle at 100% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 13.5% 45%/20% 10%, radial-gradient(circle at 0% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 87% 45%/20% 10%, linear-gradient(#ffe8b8 0 0);
}
#options .option-colors label:nth-child(2) span:nth-child(4) {
background: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 48%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 48%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 53%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 53%/20% 20%, repeating-linear-gradient(to right, #222 0 20%, #fd0 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0), radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -250% -70%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 300% -70%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(farthest-side at 52% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 18% 32%/30% 10%, radial-gradient(farthest-side at 49% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 82% 32%/30% 10%, linear-gradient(#963 0 0);
}
#options .option-colors label:nth-child(2) span:nth-child(5) {
background: linear-gradient(69deg, #0000 30%, #da8 0 70%, #0000 0) no-repeat 27% 20%/10% 7%, conic-gradient(at 90% 100%, #0000 320deg, #da8 0 350deg, #0000 0) no-repeat 25% 27%/10% 7%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 22% 50%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 72% 50%/5% 5%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 20% 55%/20% 20%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 80% 55%/20% 20%, linear-gradient(to right, #000 7%, #0000 0 43%, #000 0 57%, #0000 0 93%, #000 0) no-repeat 0 52%/100% 2.5%, radial-gradient(circle at 25% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, radial-gradient(circle at 75% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, repeating-linear-gradient(to right, brown 0 20%, gold 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat -52% -60%/52% 60%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 300% -58%/90% 56%, radial-gradient(farthest-side, #fca 99.9%, #0000 0) no-repeat 320% -50%/90% 55%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 500% -52%/95% 55%, linear-gradient(#fca 0 0);
}
#options .option-colors label:nth-child(3) span:nth-child(2) {
background: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, #203aa0 0 20%, #b94 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(circle at 100% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 13.5% 45%/20% 10%, radial-gradient(circle at 0% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 87% 45%/20% 10%, linear-gradient(#ffe8b8 0 0);
}
#options .option-colors label:nth-child(3) span:nth-child(3) {
background: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 48%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 48%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 53%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 53%/20% 20%, repeating-linear-gradient(to right, #222 0 20%, #fd0 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0), radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -250% -70%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 300% -70%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(farthest-side at 52% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 18% 32%/30% 10%, radial-gradient(farthest-side at 49% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 82% 32%/30% 10%, linear-gradient(#963 0 0);
}
#options .option-colors label:nth-child(3) span:nth-child(4) {
background: linear-gradient(69deg, #0000 30%, #da8 0 70%, #0000 0) no-repeat 27% 20%/10% 7%, conic-gradient(at 90% 100%, #0000 320deg, #da8 0 350deg, #0000 0) no-repeat 25% 27%/10% 7%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 22% 50%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 72% 50%/5% 5%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 20% 55%/20% 20%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 80% 55%/20% 20%, linear-gradient(to right, #000 7%, #0000 0 43%, #000 0 57%, #0000 0 93%, #000 0) no-repeat 0 52%/100% 2.5%, radial-gradient(circle at 25% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, radial-gradient(circle at 75% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, repeating-linear-gradient(to right, brown 0 20%, gold 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat -52% -60%/52% 60%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 300% -58%/90% 56%, radial-gradient(farthest-side, #fca 99.9%, #0000 0) no-repeat 320% -50%/90% 55%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 500% -52%/95% 55%, linear-gradient(#fca 0 0);
}
#options .option-colors label:nth-child(3) span:nth-child(5) {
background: linear-gradient(5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 15% 30%/30% 5%, linear-gradient(-5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 85% 30%/30% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, green 0 20%, #eee 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, linear-gradient(#f8d8b8 0 0);
}
#options .option-colors label:nth-child(4) span:nth-child(2) {
background: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 48%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 48%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 53%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 53%/20% 20%, repeating-linear-gradient(to right, #222 0 20%, #fd0 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0), radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -250% -70%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 300% -70%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(farthest-side at 52% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 18% 32%/30% 10%, radial-gradient(farthest-side at 49% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 82% 32%/30% 10%, linear-gradient(#963 0 0);
}
#options .option-colors label:nth-child(4) span:nth-child(3) {
background: linear-gradient(69deg, #0000 30%, #da8 0 70%, #0000 0) no-repeat 27% 20%/10% 7%, conic-gradient(at 90% 100%, #0000 320deg, #da8 0 350deg, #0000 0) no-repeat 25% 27%/10% 7%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 22% 50%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 72% 50%/5% 5%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 20% 55%/20% 20%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 80% 55%/20% 20%, linear-gradient(to right, #000 7%, #0000 0 43%, #000 0 57%, #0000 0 93%, #000 0) no-repeat 0 52%/100% 2.5%, radial-gradient(circle at 25% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, radial-gradient(circle at 75% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, repeating-linear-gradient(to right, brown 0 20%, gold 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat -52% -60%/52% 60%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 300% -58%/90% 56%, radial-gradient(farthest-side, #fca 99.9%, #0000 0) no-repeat 320% -50%/90% 55%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 500% -52%/95% 55%, linear-gradient(#fca 0 0);
}
#options .option-colors label:nth-child(4) span:nth-child(4) {
background: linear-gradient(5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 15% 30%/30% 5%, linear-gradient(-5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 85% 30%/30% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, green 0 20%, #eee 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, linear-gradient(#f8d8b8 0 0);
}
#options .option-colors label:nth-child(4) span:nth-child(5) {
background: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, #203aa0 0 20%, #b94 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(circle at 100% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 13.5% 45%/20% 10%, radial-gradient(circle at 0% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 87% 45%/20% 10%, linear-gradient(#ffe8b8 0 0);
}
#game-time:checked ~ #options,
[name=show-instructions]:checked ~ #options {
display: none;
}
#players1:checked ~ #options label[for=players1] {
background: #009630;
border: 2px solid rgba(0, 0, 0, 0.1);
color: white;
}
#players1:checked ~ #options label[for^=colors] span:nth-child(3) {
display: none;
}
#players1:checked ~ #options label[for^=colors] span:nth-child(4) {
display: none;
}
#players1:checked ~ #options label[for^=colors] span:nth-child(5) {
display: none;
}
#colors1:checked ~ #options label[for=colors1] {
opacity: 1;
border: 0;
}
#colors1:checked ~ #options label[for=colors1] span {
border: 1px solid #222;
}
#colors1:checked ~ #options label[for=colors1] span:first-child {
border: 2px solid transparent;
}
#colors1:checked ~ #options label[for=colors1] span:first-child::before {
background: radial-gradient(farthest-side, black 99%, #0000 0) no-repeat 35% 60%/15% 15%, radial-gradient(farthest-side, black 99%, #0000 0) no-repeat 65% 60%/15% 15%, radial-gradient(farthest-side at 50% 0, black 99%, #0000 0) no-repeat 50% 80%/20% 10%, conic-gradient(at 50% -20%, #0000 162deg, indianred 0 198deg, #0000 0) no-repeat 50% 0%/100% 85%, radial-gradient(farthest-side, indianred 99%, #0000 0) no-repeat 0% 100%/100% 20%;
}
#players2:checked ~ #options label[for=players2] {
background: #009630;
border: 2px solid rgba(0, 0, 0, 0.1);
color: white;
}
#players2:checked ~ #options label[for^=colors] span:nth-child(4) {
display: none;
}
#players2:checked ~ #options label[for^=colors] span:nth-child(5) {
display: none;
}
#colors2:checked ~ #options label[for=colors2] {
opacity: 1;
border: 0;
}
#colors2:checked ~ #options label[for=colors2] span {
border: 1px solid #222;
}
#colors2:checked ~ #options label[for=colors2] span:first-child {
border: 2px solid transparent;
}
#colors2:checked ~ #options label[for=colors2] span:first-child::before {
background: radial-gradient(farthest-side, black 99%, #0000 0) no-repeat 35% 60%/15% 15%, radial-gradient(farthest-side, black 99%, #0000 0) no-repeat 65% 60%/15% 15%, radial-gradient(farthest-side at 50% 0, black 99%, #0000 0) no-repeat 50% 80%/20% 10%, conic-gradient(at 50% -20%, #0000 162deg, indianred 0 198deg, #0000 0) no-repeat 50% 0%/100% 85%, radial-gradient(farthest-side, indianred 99%, #0000 0) no-repeat 0% 100%/100% 20%;
}
#players3:checked ~ #options label[for=players3] {
background: #009630;
border: 2px solid rgba(0, 0, 0, 0.1);
color: white;
}
#players3:checked ~ #options label[for^=colors] span:nth-child(5) {
display: none;
}
#colors3:checked ~ #options label[for=colors3] {
opacity: 1;
border: 0;
}
#colors3:checked ~ #options label[for=colors3] span {
border: 1px solid #222;
}
#colors3:checked ~ #options label[for=colors3] span:first-child {
border: 2px solid transparent;
}
#colors3:checked ~ #options label[for=colors3] span:first-child::before {
background: radial-gradient(farthest-side, black 99%, #0000 0) no-repeat 35% 60%/15% 15%, radial-gradient(farthest-side, black 99%, #0000 0) no-repeat 65% 60%/15% 15%, radial-gradient(farthest-side at 50% 0, black 99%, #0000 0) no-repeat 50% 80%/20% 10%, conic-gradient(at 50% -20%, #0000 162deg, indianred 0 198deg, #0000 0) no-repeat 50% 0%/100% 85%, radial-gradient(farthest-side, indianred 99%, #0000 0) no-repeat 0% 100%/100% 20%;
}
#players4:checked ~ #options label[for=players4] {
background: #009630;
border: 2px solid rgba(0, 0, 0, 0.1);
color: white;
}
#colors4:checked ~ #options label[for=colors4] {
opacity: 1;
border: 0;
}
#colors4:checked ~ #options label[for=colors4] span {
border: 1px solid #222;
}
#colors4:checked ~ #options label[for=colors4] span:first-child {
border: 2px solid transparent;
}
#colors4:checked ~ #options label[for=colors4] span:first-child::before {
background: radial-gradient(farthest-side, black 99%, #0000 0) no-repeat 35% 60%/15% 15%, radial-gradient(farthest-side, black 99%, #0000 0) no-repeat 65% 60%/15% 15%, radial-gradient(farthest-side at 50% 0, black 99%, #0000 0) no-repeat 50% 80%/20% 10%, conic-gradient(at 50% -20%, #0000 162deg, indianred 0 198deg, #0000 0) no-repeat 50% 0%/100% 85%, radial-gradient(farthest-side, indianred 99%, #0000 0) no-repeat 0% 100%/100% 20%;
}
#colors1:checked ~ #game #piece-player-1 {
background: linear-gradient(69deg, #0000 30%, #da8 0 70%, #0000 0) no-repeat 27% 20%/10% 7%, conic-gradient(at 90% 100%, #0000 320deg, #da8 0 350deg, #0000 0) no-repeat 25% 27%/10% 7%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 22% 50%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 72% 50%/5% 5%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 20% 55%/20% 20%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 80% 55%/20% 20%, linear-gradient(to right, #000 7%, #0000 0 43%, #000 0 57%, #0000 0 93%, #000 0) no-repeat 0 52%/100% 2.5%, radial-gradient(circle at 25% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, radial-gradient(circle at 75% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, repeating-linear-gradient(to right, brown 0 20%, gold 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat -52% -60%/52% 60%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 300% -58%/90% 56%, radial-gradient(farthest-side, #fca 99.9%, #0000 0) no-repeat 320% -50%/90% 55%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 500% -52%/95% 55%, linear-gradient(#fca 0 0);
}
#colors1:checked ~ #game #piece-player-2 {
background: linear-gradient(5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 15% 30%/30% 5%, linear-gradient(-5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 85% 30%/30% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, green 0 20%, #eee 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, linear-gradient(#f8d8b8 0 0);
}
#colors1:checked ~ #game #piece-player-3 {
background: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, #203aa0 0 20%, #b94 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(circle at 100% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 13.5% 45%/20% 10%, radial-gradient(circle at 0% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 87% 45%/20% 10%, linear-gradient(#ffe8b8 0 0);
}
#colors1:checked ~ #game #piece-player-4 {
background: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 48%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 48%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 53%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 53%/20% 20%, repeating-linear-gradient(to right, #222 0 20%, #fd0 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0), radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -250% -70%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 300% -70%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(farthest-side at 52% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 18% 32%/30% 10%, radial-gradient(farthest-side at 49% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 82% 32%/30% 10%, linear-gradient(#963 0 0);
}
#colors2:checked ~ #game #piece-player-1 {
background: linear-gradient(5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 15% 30%/30% 5%, linear-gradient(-5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 85% 30%/30% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, green 0 20%, #eee 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, linear-gradient(#f8d8b8 0 0);
}
#colors2:checked ~ #game #piece-player-2 {
background: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, #203aa0 0 20%, #b94 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(circle at 100% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 13.5% 45%/20% 10%, radial-gradient(circle at 0% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 87% 45%/20% 10%, linear-gradient(#ffe8b8 0 0);
}
#colors2:checked ~ #game #piece-player-3 {
background: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 48%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 48%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 53%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 53%/20% 20%, repeating-linear-gradient(to right, #222 0 20%, #fd0 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0), radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -250% -70%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 300% -70%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(farthest-side at 52% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 18% 32%/30% 10%, radial-gradient(farthest-side at 49% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 82% 32%/30% 10%, linear-gradient(#963 0 0);
}
#colors2:checked ~ #game #piece-player-4 {
background: linear-gradient(69deg, #0000 30%, #da8 0 70%, #0000 0) no-repeat 27% 20%/10% 7%, conic-gradient(at 90% 100%, #0000 320deg, #da8 0 350deg, #0000 0) no-repeat 25% 27%/10% 7%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 22% 50%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 72% 50%/5% 5%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 20% 55%/20% 20%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 80% 55%/20% 20%, linear-gradient(to right, #000 7%, #0000 0 43%, #000 0 57%, #0000 0 93%, #000 0) no-repeat 0 52%/100% 2.5%, radial-gradient(circle at 25% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, radial-gradient(circle at 75% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, repeating-linear-gradient(to right, brown 0 20%, gold 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat -52% -60%/52% 60%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 300% -58%/90% 56%, radial-gradient(farthest-side, #fca 99.9%, #0000 0) no-repeat 320% -50%/90% 55%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 500% -52%/95% 55%, linear-gradient(#fca 0 0);
}
#colors3:checked ~ #game #piece-player-1 {
background: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, #203aa0 0 20%, #b94 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(circle at 100% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 13.5% 45%/20% 10%, radial-gradient(circle at 0% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 87% 45%/20% 10%, linear-gradient(#ffe8b8 0 0);
}
#colors3:checked ~ #game #piece-player-2 {
background: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 48%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 48%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 53%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 53%/20% 20%, repeating-linear-gradient(to right, #222 0 20%, #fd0 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0), radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -250% -70%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 300% -70%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(farthest-side at 52% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 18% 32%/30% 10%, radial-gradient(farthest-side at 49% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 82% 32%/30% 10%, linear-gradient(#963 0 0);
}
#colors3:checked ~ #game #piece-player-3 {
background: linear-gradient(69deg, #0000 30%, #da8 0 70%, #0000 0) no-repeat 27% 20%/10% 7%, conic-gradient(at 90% 100%, #0000 320deg, #da8 0 350deg, #0000 0) no-repeat 25% 27%/10% 7%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 22% 50%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 72% 50%/5% 5%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 20% 55%/20% 20%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 80% 55%/20% 20%, linear-gradient(to right, #000 7%, #0000 0 43%, #000 0 57%, #0000 0 93%, #000 0) no-repeat 0 52%/100% 2.5%, radial-gradient(circle at 25% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, radial-gradient(circle at 75% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, repeating-linear-gradient(to right, brown 0 20%, gold 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat -52% -60%/52% 60%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 300% -58%/90% 56%, radial-gradient(farthest-side, #fca 99.9%, #0000 0) no-repeat 320% -50%/90% 55%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 500% -52%/95% 55%, linear-gradient(#fca 0 0);
}
#colors3:checked ~ #game #piece-player-4 {
background: linear-gradient(5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 15% 30%/30% 5%, linear-gradient(-5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 85% 30%/30% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, green 0 20%, #eee 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, linear-gradient(#f8d8b8 0 0);
}
#colors4:checked ~ #game #piece-player-1 {
background: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 48%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 48%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 53%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 53%/20% 20%, repeating-linear-gradient(to right, #222 0 20%, #fd0 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0), radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -250% -70%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 300% -70%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #963 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #111 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(farthest-side at 52% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 18% 32%/30% 10%, radial-gradient(farthest-side at 49% 120%, #0000 70%, #111 0 99%, #0000 0) no-repeat 82% 32%/30% 10%, linear-gradient(#963 0 0);
}
#colors4:checked ~ #game #piece-player-2 {
background: linear-gradient(69deg, #0000 30%, #da8 0 70%, #0000 0) no-repeat 27% 20%/10% 7%, conic-gradient(at 90% 100%, #0000 320deg, #da8 0 350deg, #0000 0) no-repeat 25% 27%/10% 7%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 22% 50%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 72% 50%/5% 5%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 20% 55%/20% 20%, radial-gradient(farthest-side, #000 90%, #0000 0) no-repeat 80% 55%/20% 20%, linear-gradient(to right, #000 7%, #0000 0 43%, #000 0 57%, #0000 0 93%, #000 0) no-repeat 0 52%/100% 2.5%, radial-gradient(circle at 25% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, radial-gradient(circle at 75% 50%, #0000 22%, #000 0 25%, #0000 0) no-repeat 0 52%/100% 40%, repeating-linear-gradient(to right, brown 0 20%, gold 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat -52% -60%/52% 60%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 300% -58%/90% 56%, radial-gradient(farthest-side, #fca 99.9%, #0000 0) no-repeat 320% -50%/90% 55%, radial-gradient(farthest-side, #642 99.9%, #0000 0) no-repeat 500% -52%/95% 55%, linear-gradient(#fca 0 0);
}
#colors4:checked ~ #game #piece-player-3 {
background: linear-gradient(5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 15% 30%/30% 5%, linear-gradient(-5deg, #0000 40%, #ffe 0 70%, #0000 0) no-repeat 85% 30%/30% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #333 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, green 0 20%, #eee 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #ffe 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, linear-gradient(#f8d8b8 0 0);
}
#colors4:checked ~ #game #piece-player-4 {
background: radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 24% 45%/5% 5%, radial-gradient(farthest-side, #fff 90%, #0000 0) no-repeat 70% 45%/5% 5%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 23% 50%/20% 20%, radial-gradient(farthest-side, #111 90%, #0000 0) no-repeat 77% 50%/20% 20%, repeating-linear-gradient(to right, #203aa0 0 20%, #b94 0 40%) no-repeat 0 100%/100% 25%, linear-gradient(#0000 73%, #000 0 90%, #0000 0) no-repeat, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -300% -70%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 400% -70%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat -350% -65%/90% 50%, radial-gradient(farthest-side, #ffe8b8 99.9%, #0000 0) no-repeat 450% -65%/90% 50%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat 200% -55%/80% 48%, radial-gradient(farthest-side, #432 99.9%, #0000 0) no-repeat -150% -55%/86% 47%, radial-gradient(circle at 100% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 13.5% 45%/20% 10%, radial-gradient(circle at 0% 0%, #0000 0 35%, #432 0 40%, #0000 0 50%, #432 0 55%, #0000 0 65%, #432 0 70%, #0000 0) no-repeat 87% 45%/20% 10%, linear-gradient(#ffe8b8 0 0);
}
/** info pop-up **/
#info {
display: none;
}
#info .box {
width: 75%;
max-width: none;
}
#info .box p:last-child {
text-align: right;
}
#info .box #close-button {
display: inline-block;
background: #396;
border-radius: 3px;
color: white;
padding: 6px 1rem;
cursor: pointer;
transition: background 0.5s;
}
#info .box #close-button:hover {
background: #2d8659;
}
#show-info:checked ~ #info {
display: block;
}
/** Instructions **/
#instructions {
position: fixed;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.01);
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
}
#instructions #go-to-game {
position: absolute;
bottom: 1rem;
right: 1rem;
font-size: 1rem;
z-index: 3;
color: white;
cursor: pointer;
}
#instructions #step {
display: none;
position: absolute;
box-shadow: 0 0 50px calc(200vmax) rgba(0, 0, 0, 0.85), inset 0 0 4px 0 black;
transform: translate(-1rem, -1rem);
border-radius: 100%;
z-index: 1;
top: 0;
left: 1rem;
width: calc(100px + 2rem);
height: calc(6rem);
transition: all 0.75s;
}
#instructions #step div {
position: absolute;
bottom: -0.5rem;
line-height: 1.1rem;
font-size: 1rem;
color: rgba(255, 255, 255, 0.8);
left: 1rem;
width: 80vmin;
transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
}
#instructions #step div label {
display: none;
font-weight: bold;
cursor: pointer;
text-decoration: underline;
}
#instructions #step div label:hover {
text-decoration: none;
}
#instructions #step div label:not([for=game-time])::before {
content: "Next ›";
}
[name=show-instructions]:checked ~ #instructions, [name=show-instructions]:checked ~ #game, [name=show-instructions]:checked ~ #action, [name=show-instructions]:checked ~ #instructions #step {
display: block;
}
#show-instructions-1:checked ~ #instructions label[for=show-instructions-2] {
display: inline-block;
}
#show-instructions-2:checked ~ #instructions label[for=show-instructions-3] {
display: inline-block;
}
#show-instructions-3:checked ~ #instructions label[for=show-instructions-4] {
display: inline-block;
}
#show-instructions-4:checked ~ #instructions label[for=show-instructions-5] {
display: inline-block;
}
#show-instructions-5:checked ~ #instructions label[for=game-time] {
display: inline-block;
}
#show-instructions-1:checked ~ #instructions #step {
top: 0;
left: 1rem;
width: calc(100px + 2rem);
height: calc(6rem);
}
#show-instructions-1:checked ~ #instructions #step div::before {
content: "This area indicates whose turn it is at any given moment.";
}
#show-instructions-2:checked ~ #instructions #step {
top: 6rem;
left: 1rem;
width: 5rem;
height: 5rem;
}
#show-instructions-2:checked ~ #instructions #step div::before {
content: "The active player clicks here to roll the dice.";
}
#show-instructions-3:checked ~ #instructions #step {
top: 50%;
left: 50%;
width: 30vw;
height: 30vw;
max-width: 500px;
max-height: 500px;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
#show-instructions-3:checked ~ #inst.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0