效果预览

在线演示

按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。

https://codepen.io/comehope/pen/WyXrjz

可交互视频

此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/p/pEgDAM/czVVNtd

源代码下载

本地下载

每日前端实战系列的全部源代码请从 github 下载:

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom,一共 8 个列表,每个列表包含 8 个元素:

<div class="chess">
<ul>
<li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li>
</ul> <ul>
<li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li>
</ul> <ul>
<li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li>
</ul> <ul>
<li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li>
</ul> <ul>
<li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li>
</ul> <ul>
<li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li>
</ul> <ul>
<li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li>
</ul> <ul>
<li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li>
</ul>
</div>

居中显示:

body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: darkslategray;
}

定义容器的背景色和尺寸(由字号决定尺寸):

.chess {
background-color: burlywood;
font-size: 32px;
}

画出网格状棋盘:

ul {
display: table;
margin: 0;
padding: 0;
} li {
display: table-cell;
width: 1.5em;
height: 1.5em;
}

设置网格交错的颜色:

ul:nth-child(odd) li:nth-child(even),
ul:nth-child(even) li:nth-child(odd) {
background-color: rgba(0, 0, 0, 0.6);
}

在棋盘上安放棋子:

<div class="chess">
<ul>
<li>♜</li>
<li>♞</li>
<li>♝</li>
<li>♛</li>
<li>♚</li>
<li>♝</li>
<li>♞</li>
<li>♜</li>
</ul> <ul>
<li>♟</li>
<li>♟</li>
<li>♟</li>
<li>♟</li>
<li>♟</li>
<li>♟</li>
<li>♟</li>
<li>♟</li>
</ul> <ul>
<li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li>
</ul> <ul>
<li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li>
</ul> <ul>
<li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li>
</ul> <ul>
<li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li>
</ul> <ul>
<li>♟</li>
<li>♟</li>
<li>♟</li>
<li>♟</li>
<li>♟</li>
<li>♟</li>
<li>♟</li>
<li>♟</li>
</ul> <ul>
<li>♜</li>
<li>♞</li>
<li>♝</li>
<li>♛</li>
<li>♚</li>
<li>♝</li>
<li>♞</li>
<li>♜</li>
</ul>
</div>

设置棋子的颜色:

ul:nth-child(-n+2) {
color: black;
} ul:nth-child(n+7) {
color: white;
}

最后,为棋盘增加一点立体效果:

.chess {
border: 0.2em solid tan;
box-shadow: 0 0.3em 2em 0.4em rgba(0, 0, 0, 0.3);
}

大功告成!

原文地址:https://segmentfault.com/a/1190000015310484

如何用纯 CSS 创作一副国际象棋的更多相关文章

  1. 54.纯 CSS 创作一副国际象棋

    原文地址:https://segmentfault.com/a/1190000015310484 感想:棋盘是 CSS 画的,棋子是 unicode 字符. HTML code: <html&g ...

  2. 如何用纯 CSS 创作文本滑动特效的 UI 界面

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/QrxxaW 可交互视频教 ...

  3. 如何用纯 CSS 创作一种有削铁如泥感觉的菜单导航特效

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/XqYroe 可交互视频教 ...

  4. 如何用纯 CSS 创作 404 文字变形为 NON 文字的交互特效

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZoxjXm 可交互视频教 ...

  5. 如何用纯 CSS 创作炫酷的同心矩形旋转动画

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/bMvbRp 可交互视频教 ...

  6. 如何用纯 CSS 创作一个渐变色动画边框

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odpRKX 可交互视频教 ...

  7. 如何用纯 CSS 创作条形图,不用任何图表库

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 在线演示 https://codepen.io/zhang-ou/pen/XqzGLp 可交互视频教 ...

  8. 如何用纯 CSS 创作一种侧立图书的特效

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/deVgRM 可交互视频教程 此视 ...

  9. 如何用纯 CSS 创作一个冒着热气的咖啡杯

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/xjXxoz 可交互视频教程 此视 ...

随机推荐

  1. JSON 返回值JSONPath Syntax

    {"sys":"ROC","code":0,"messages":"获取列表成功!","d ...

  2. Node.js 第三方包的安装、升级、卸载,以及包依赖管理

    本地安装: npm install package-name 全局全装: npm install -g  package-name 举个栗子 全局安装 React项目的脚手架 npm install ...

  3. Codeforces Round #566 (Div. 2)

    Codeforces Round #566 (Div. 2) A Filling Shapes 给定一个 \(3\times n\) 的网格,问使用 这样的占三个格子图形填充满整个网格的方案数 如果 ...

  4. RTC-IC-PCF2129

    一特点: -20~70度,SPI/I2C接口,1.2 V to 4.2 V ,可编程看门狗,时钟输出以便校准,闹钟输出,时间戳输出.低功耗高精度,电源切换,中断输出. SPI接口和I2C接口硬件接法: ...

  5. 前端开发如何做好SEO优化的工作

    前端开发工程师不仅需要要跟视觉设计师.交互式设计师配合,完美还原设计图稿,编写兼容各大浏览器.加载速度快.用户体验好的页面.现在还需要跟SEO人员配合,调整页面的代码结构和标签. 一些成熟的平台,在开 ...

  6. logback整合Logstash

    1.依赖 <dependency> <groupId>net.logstash.logback</groupId> <artifactId>logsta ...

  7. RHEL/CentOS 7.X 安装笔记

    配置vim # 配置 vim 编辑器 yum install vim rm /usr/bin/vi ln -s /usr/bin/vim /usr/bin/vi vi /etc/vimrc # 开启语 ...

  8. Java基础:(三)运算

    一.参数传递 Java的参数是以值传递的形式传入方法中,而不是引用传递. 二.隐式类型转换 Java不能隐式执行向下转型,因为这会使精度降低:但是使用 += 运算符可以执行隐式类型转换. float ...

  9. @ConfigurationProperties

    功能 将属性文件与一个Java类绑定,属性文件中的变量与Java类中的成员变量一一对应,无需完全一致. 如需将 @ConfigurationProperties 注解的目标类添加到Spring IOC ...

  10. AJPFX关于Java中的集合

    ava API中所用的集合类,都是实现了Collection接口,他的一个类继承结构如下: Collection<--List<--Vector Collection<--List& ...