井字游戏HTML,纯CSS3实现的井字棋游戏
运行效果：
html
Note: use the Full Page view for the best experience.
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;
以上就是纯CSS3实现的井字棋游戏的详细内容，更多关于CSS3 井字棋游戏的资料请关注脚本之家其它相关文章！
井字游戏HTML,纯CSS3实现的井字棋游戏相关推荐
- php井字游戏,python实现井字棋游戏
#本游戏python3.4.0下编写调试,只能在windows下运行. import random import subprocess import time #定义函数 def draw_board ...
- php井字游戏代码_JS实现井字棋游戏步骤详解
这次给大家带来JS实现井字棋游戏步骤详解,JS实现井字棋游戏的注意事项有哪些,下面就是实战案例,一起来看一下. 最近有一门课结束了,需要做一个井字棋的游戏,我用JavaScript写了一个.首先界面应 ...
- c语言井字棋程序设计报告,井字棋游戏（课程设计）总结报告.doc
井字棋游戏(课程设计)总结报告 C语言贪吃蛇游戏设计总结报告 PAGE PAGE 5 丽水学院 计算机信息学院 <C语言课程设计(短一)> 指 导 书 二 ○ 一一 年 三 附件二 封面格 ...
- Minimax 和 Alpha-beta 剪枝算法简介，及以此实现的井字棋游戏（Tic-tac-toe）
前段时间用 React 写了个2048 游戏来练练手,准备用来回顾下 React 相关的各种技术,以及试验一下新技术.在写这个2048的过程中,我考虑是否可以在其中加入一个 AI 算法来自动进行游戏, ...
- C++井字棋游戏，DOS界面版
据说有一个能保证不败的算法.明天看看先再写个PVC版的. 正题.今天无聊写了个井字棋游戏,顺便逐渐让自己习惯良好的代码风格,放上来给新手学习学习. jzq2.cpp /*N字棋游戏PVP版,DOS版本 ...
- python井字棋ai_[Python100行系列]-井字棋游戏
博客:Hzy的博客 | Hzy Bloghzeyuan.cn一些学习python的小项目,小游戏.python小项目github.com 话不多说,今天尝试用turtle库来写一个井字棋游戏.1. ...
- [CareerCup] 17.2 Tic Tac Toe 井字棋游戏
17.2 Design an algorithm to figure out if someone has won a game oftic-tac-toe. 这道题让我们判断玩家是否能赢井字棋游戏, ...
- 采用α-β算法实现井字棋游戏
题目描述 (1)图形化界面. (2)随机选取先手后手. (3)可以人-计算机或计算机-计算机 界面效果 算法 基本思想 Max-Min算法: 采用Max-Min算法进行对抗搜索,Max和Min双方均要 ...
- C++实现的基于α-β剪枝算法的井字棋游戏
"井字棋"游戏(又叫"三子棋"),是一款十分经典的益智小游戏,操作简单,娱乐性强.两个玩家,一个打圈(O),一个打叉(X),轮流在3乘3的格上打自己的符号,最先 ...
最新文章
- 简易在线实验室管理系统
- srgan要训练多久_SRGAN With WGAN：让超分辨率算法训练更稳定
- 输出四位完全平方数_LeetCode 题解 | 279. 完全平方数
- 带收缩因子的PSO优化算法
- hdu 5521 Meeting（最短路）
- SSM高级整合_非Maven控制版本下SSM高级整合
- Python中处理DataFrame，R绘图
- 这份网约车安全乘车指南，请务必收下！
- 浙大JAVA实验题12_2019浙大计算机考研机试模拟赛（2）——概念专题
- linux的系统移植——交叉编译器
- 【Flink】Flink network netty ProducerFailedException SimpleChannelInboundHandler NullPointerException
- jetty9配置指南及jetty9部署jenkins
- [Python] random.uniform( ) 函数教程与实例解析
- 计算机最大化快捷键,Win7笔记本电脑窗口最大化和最小化的快捷键是什么
- CSI-RS接收流程
- 如何查看Android API文档
- java如何删除一本图书_javaEE项目网上书城后台（如何删除一本书并且有提示）...
- 读书笔记：《量化投资实务》
- 标准化、归一化、中心化
- 【详解】位运算符：位逻辑运算符，位移运算符（＜＜左移，＞＞右移）