效果：
HTML
CSS3
- @charset "UTF-8";
- /* Variables
- -------------------------------------------------------------- */
- /* Body and Notice styling
- -------------------------------------------------------------- */
- body {
- color: #b6b5ca;
- font-family: 'Arial', sans-serif;
- margin: 0;
- text-align: center;
- }
-
- h5 {
- font-weight: 400;
- padding: 0 20px;
- }
-
- /* Tic-tac-toe game
- -------------------------------------------------------------- */
- .tic-tac-toe {
- font-family: 'Open Sans', sans-serif;
- height: 300px;
- overflow: hidden;
- margin: 50px auto 30px auto;
- position: relative;
- width: 300px;
- }
- @media (min-width: 450px) {
- .tic-tac-toe {
- height: 450px;
- width: 450px;
- }
- }
- .tic-tac-toe input[type="radio"] {
- display: none;
- }
- .tic-tac-toe input[type="radio"]:checked + label {
- cursor: default;
- z-index: 10 !important;
- }
- .tic-tac-toe input[type="radio"].player-1 + label:after {
- content: "";
- }
- .tic-tac-toe input[type="radio"].player-2 + label:after {
- content: "";
- }
- .tic-tac-toe input[type="radio"].player-1:checked + label:after, .tic-tac-toe input[type="radio"].player-2:checked + label:after {
- opacity: 1;
- }
- .tic-tac-toe input[type="radio"].player-1:checked + label {
- background-color: #dc685a;
- }
- .tic-tac-toe input[type="radio"].player-2:checked + label {
- background-color: #ecaf4f;
- }
- .tic-tac-toe input[type="radio"].turn-1 + label {
- z-index: 1;
- }
- .tic-tac-toe input[type="radio"].turn-2 + label {
- z-index: 2;
- }
- .tic-tac-toe input[type="radio"].turn-3 + label {
- z-index: 3;
- }
- .tic-tac-toe input[type="radio"].turn-4 + label {
- z-index: 4;
- }
- .tic-tac-toe input[type="radio"].turn-5 + label {
- z-index: 5;
- }
- .tic-tac-toe input[type="radio"].turn-6 + label {
- z-index: 6;
- }
- .tic-tac-toe input[type="radio"].turn-7 + label {
- z-index: 7;
- }
- .tic-tac-toe input[type="radio"].turn-8 + label {
- z-index: 8;
- }
- .tic-tac-toe input[type="radio"].turn-9 + label {
- z-index: 9;
- }
- .tic-tac-toe input[type="radio"].turn-1 + label {
- display: block;
- }
- .tic-tac-toe input[type="radio"].turn-1:checked ~ .turn-2 + label {
- display: block;
- }
- .tic-tac-toe input[type="radio"].turn-2:checked ~ .turn-3 + label {
- display: block;
- }
- .tic-tac-toe input[type="radio"].turn-3:checked ~ .turn-4 + label {
- display: block;
- }
- .tic-tac-toe input[type="radio"].turn-4:checked ~ .turn-5 + label {
- display: block;
- }
- .tic-tac-toe input[type="radio"].turn-5:checked ~ .turn-6 + label {
- display: block;
- }
- .tic-tac-toe input[type="radio"].turn-6:checked ~ .turn-7 + label {
- display: block;
- }
- .tic-tac-toe input[type="radio"].turn-7:checked ~ .turn-8 + label {
- display: block;
- }
- .tic-tac-toe input[type="radio"].turn-8:checked ~ .turn-9 + label {
- display: block;
- }
- .tic-tac-toe input[type="radio"].left + label {
- left: 0;
- }
- .tic-tac-toe input[type="radio"].top + label {
- top: 0;
- }
- .tic-tac-toe input[type="radio"].middle + label {
- left: 100px;
- }
- .tic-tac-toe input[type="radio"].right + label {
- left: 200px;
- }
- .tic-tac-toe input[type="radio"].center + label {
- top: 100px;
- }
- .tic-tac-toe input[type="radio"].bottom + label {
- top: 200px;
- }
- @media (min-width: 450px) {
- .tic-tac-toe input[type="radio"].middle + label {
- left: 150px;
- }
- .tic-tac-toe input[type="radio"].right + label {
- left: 300px;
- }
- .tic-tac-toe input[type="radio"].center + label {
- top: 150px;
- }
- .tic-tac-toe input[type="radio"].bottom + label {
- top: 300px;
- }
- }
- .tic-tac-toe input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~
- input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~
- input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~ .end {
- display: block;
- }
- .tic-tac-toe input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~
- input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~
- input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~ .end > h3:before {
- content: "It is a tie!";
- }
- .tic-tac-toe .player-1.first-column:checked ~ .player-1.first-column:checked ~ .player-1.first-column:checked ~ .end,
- .tic-tac-toe .player-1.second-column:checked ~ .player-1.second-column:checked ~ .player-1.second-column:checked ~ .end,
- .tic-tac-toe .player-1.third-column:checked ~ .player-1.third-column:checked ~ .player-1.third-column:checked ~ .end,
- .tic-tac-toe .player-1.first-row:checked ~ .player-1.first-row:checked ~ .player-1.first-row:checked ~ .end,
- .tic-tac-toe .player-1.second-row:checked ~ .player-1.second-row:checked ~ .player-1.second-row:checked ~ .end,
- .tic-tac-toe .player-1.third-row:checked ~ .player-1.third-row:checked ~ .player-1.third-row:checked ~ .end,
- .tic-tac-toe .player-1.first-diagonal:checked ~ .player-1.first-diagonal:checked ~ .player-1.first-diagonal:checked ~ .end,
- .tic-tac-toe .player-1.second-diagonal:checked ~ .player-1.second-diagonal:checked ~ .player-1.second-diagonal:checked ~ .end {
- display: block;
- }
- .tic-tac-toe .player-1.first-column:checked ~ .player-1.first-column:checked ~ .player-1.first-column:checked ~ .end h3:before,
- .tic-tac-toe .player-1.second-column:checked ~ .player-1.second-column:checked ~ .player-1.second-column:checked ~ .end h3:before,
- .tic-tac-toe .player-1.third-column:checked ~ .player-1.third-column:checked ~ .player-1.third-column:checked ~ .end h3:before,
- .tic-tac-toe .player-1.first-row:checked ~ .player-1.first-row:checked ~ .player-1.first-row:checked ~ .end h3:before,
- .tic-tac-toe .player-1.second-row:checked ~ .player-1.second-row:checked ~ .player-1.second-row:checked ~ .end h3:before,
- .tic-tac-toe .player-1.third-row:checked ~ .player-1.third-row:checked ~ .player-1.third-row:checked ~ .end h3:before,
- .tic-tac-toe .player-1.first-diagonal:checked ~ .player-1.first-diagonal:checked ~ .player-1.first-diagonal:checked ~ .end h3:before,
- .tic-tac-toe .player-1.second-diagonal:checked ~ .player-1.second-diagonal:checked ~ .player-1.second-diagonal:checked ~ .end h3:before {
- content: "Player 1 wins!" !important;
- }
- .tic-tac-toe .player-2.first-column:checked ~ .player-2.first-column:checked ~ .player-2.first-column:checked ~ .end,
- .tic-tac-toe .player-2.second-column:checked ~ .player-2.second-column:checked ~ .player-2.second-column:checked ~ .end,
- .tic-tac-toe .player-2.third-column:checked ~ .player-2.third-column:checked ~ .player-2.third-column:checked ~ .end,
- .tic-tac-toe .player-2.first-row:checked ~ .player-2.first-row:checked ~ .player-2.first-row:checked ~ .end,
- .tic-tac-toe .player-2.second-row:checked ~ .player-2.second-row:checked ~ .player-2.second-row:checked ~ .end,
- .tic-tac-toe .player-2.third-row:checked ~ .player-2.third-row:checked ~ .player-2.third-row:checked ~ .end,
- .tic-tac-toe .player-2.first-diagonal:checked ~ .player-2.first-diagonal:checked ~ .player-2.first-diagonal:checked ~ .end,
- .tic-tac-toe .player-2.second-diagonal:checked ~ .player-2.second-diagonal:checked ~ .player-2.second-diagonal:checked ~ .end {
- display: block;
- }
- .tic-tac-toe .player-2.first-column:checked ~ .player-2.first-column:checked ~ .player-2.first-column:checked ~ .end h3:before,
- .tic-tac-toe .player-2.second-column:checked ~ .player-2.second-column:checked ~ .player-2.second-column:checked ~ .end h3:before,
- .tic-tac-toe .player-2.third-column:checked ~ .player-2.third-column:checked ~ .player-2.third-column:checked ~ .end h3:before,
- .tic-tac-toe .player-2.first-row:checked ~ .player-2.first-row:checked ~ .player-2.first-row:checked ~ .end h3:before,
- .tic-tac-toe .player-2.second-row:checked ~ .player-2.second-row:checked ~ .player-2.second-row:checked ~ .end h3:before,
- .tic-tac-toe .player-2.third-row:checked ~ .player-2.third-row:checked ~ .player-2.third-row:checked ~ .end h3:before,
- .tic-tac-toe .player-2.first-diagonal:checked ~ .player-2.first-diagonal:checked ~ .player-2.first-diagonal:checked ~ .end h3:before,
- .tic-tac-toe .player-2.second-diagonal:checked ~ .player-2.second-diagonal:checked ~ .player-2.second-diagonal:checked ~ .end h3:before {
- content: "Player 2 wins!" !important;
- }
- .tic-tac-toe label {
- background-color: #78bec5;
- border-radius: 14px;
- cursor: pointer;
- color: #fff;
- display: none;
- height: 90px;
- margin: 5px;
- position: absolute;
- width: 90px;
- -moz-transition: background-color 0.3s;
- -o-transition: background-color 0.3s;
- -webkit-transition: background-color 0.3s;
- transition: background-color 0.3s;
- }
- @media (min-width: 450px) {
- .tic-tac-toe label {
- height: 140px;
- width: 140px;
- }
- }
- .tic-tac-toe label:hover {
- background-color: #3d4250;
- }
- .tic-tac-toe label:hover:after {
- opacity: .4;
- }
- .tic-tac-toe label:after {
- left: 0;
- font-family: "FontAwesome";
- font-size: 45px;
- margin-top: -22.5px;
- opacity: 0;
- position: absolute;
- text-align: center;
- text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
- top: 50%;
- width: 100%;
- }
- @media (min-width: 450px) {
- .tic-tac-toe label:after {
- font-size: 70px;
- margin-top: -35px;
- }
- }
- .tic-tac-toe .end {
- background: rgba(255, 255, 255, 0.8);
- bottom: 5px;
- color: #3d4250;
- display: none;
- left: 5px;
- padding-top: 55px;
- position: absolute;
- right: 5px;
- top: 5px;
- text-align: center;
- z-index: 11;
- }
- @media (min-width: 450px) {
- .tic-tac-toe .end {
- padding-top: 110px;
- }
- }
- .tic-tac-toe .end h3 {
- font-size: 30px;
- font-weight: 300;
- }
- @media (min-width: 450px) {
- .tic-tac-toe .end h3 {
- font-size: 40px;
- }
- }
- .tic-tac-toe .end a {
- background-color: #3d4250;
- border-radius: 4px;
- color: #fff;
- padding: 14px 45px;
- text-decoration: none;
- -moz-transition: background-color 0.2s;
- -o-transition: background-color 0.2s;
- -webkit-transition: background-color 0.2s;
- transition: background-color 0.2s;
- }
- .tic-tac-toe .end a:hover {
- background-color: #262934;
- cursor: pointer;
|
湘公网安备 43019002000684号 )
立即注册
登录
发表于 2020-12-3 19:16:19