zhaoxin/rock-paper-scissors
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

整理一下

Browse Source
This commit is contained in:
赵鑫 2022-08-21 00:41:48 +08:00
parent deb700e3b4
commit 4ada6a738f
1 changed files with 24 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
public/style.css
View File

@ -21,45 +21,22 @@ body {
#game, #game,
#player1, #player1,
#player2 { #player2 {
position: relative;
display: flex; display: flex;
gap: 10px; gap: 10px;
} }
kbd {
padding: 4px 8px;
border: 1px solid #777;
border-radius: 0.25rem;
}
.score,
.shape {
min-width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.shape {
border: 1px solid #777;
border-radius: 1rem;
}
#player1,
#player2 {
position: relative;
}
.name { .name {
font-size: 2rem; font-size: 2rem;
font-weight: 600; font-weight: 600;
position: absolute; position: absolute;
top: 0px; }
#player1 .name {
left: 0px; left: 0px;
} }
#player2 .name { #player2 .name {
left: auto;
right: 0px; right: 0px;
} }
@ -68,24 +45,30 @@ kbd {
padding: 0 1rem; padding: 0 1rem;
} }
#player1 .shape, .score,
#player2 .shape { .shape {
min-width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.shape {
border-radius: 1rem;
border: 1px solid #777;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 200px 200px; background-size: 200px 200px;
} transition: background-image 1s; /* 为什么没有作用？ */
.rock {
background: url(rock.png);
}
.paper {
background: url(paper.png);
}
.scissors {
background: url(scissors.png);
} }
#player2 .shape { #player2 .shape {
transform: scaleX(-1); transform: scaleX(-1);
} }
kbd {
padding: 4px 8px;
border-radius: 0.25rem;
border: 1px solid #777;
background-color: #eee;
}