如何用纯 CSS 创作一副国际象棋
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
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>&#9820;</li>
<li>&#9822;</li>
<li>&#9821;</li>
<li>&#9819;</li>
<li>&#9818;</li>
<li>&#9821;</li>
<li>&#9822;</li>
<li>&#9820;</li>
</ul>
<ul>
<li>&#9823;</li>
<li>&#9823;</li>
<li>&#9823;</li>
<li>&#9823;</li>
<li>&#9823;</li>
<li>&#9823;</li>
<li>&#9823;</li>
<li>&#9823;</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>&#9823;</li>
<li>&#9823;</li>
<li>&#9823;</li>
<li>&#9823;</li>
<li>&#9823;</li>
<li>&#9823;</li>
<li>&#9823;</li>
<li>&#9823;</li>
</ul>
<ul>
<li>&#9820;</li>
<li>&#9822;</li>
<li>&#9821;</li>
<li>&#9819;</li>
<li>&#9818;</li>
<li>&#9821;</li>
<li>&#9822;</li>
<li>&#9820;</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 创作一副国际象棋的更多相关文章
- 54.纯 CSS 创作一副国际象棋
原文地址:https://segmentfault.com/a/1190000015310484 感想:棋盘是 CSS 画的,棋子是 unicode 字符. HTML code: <html&g ...
- 如何用纯 CSS 创作文本滑动特效的 UI 界面
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/QrxxaW 可交互视频教 ...
- 如何用纯 CSS 创作一种有削铁如泥感觉的菜单导航特效
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/XqYroe 可交互视频教 ...
- 如何用纯 CSS 创作 404 文字变形为 NON 文字的交互特效
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZoxjXm 可交互视频教 ...
- 如何用纯 CSS 创作炫酷的同心矩形旋转动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/bMvbRp 可交互视频教 ...
- 如何用纯 CSS 创作一个渐变色动画边框
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odpRKX 可交互视频教 ...
- 如何用纯 CSS 创作条形图,不用任何图表库
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 在线演示 https://codepen.io/zhang-ou/pen/XqzGLp 可交互视频教 ...
- 如何用纯 CSS 创作一种侧立图书的特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/deVgRM 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个冒着热气的咖啡杯
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/xjXxoz 可交互视频教程 此视 ...
随机推荐
- JSON 返回值JSONPath Syntax
{"sys":"ROC","code":0,"messages":"获取列表成功!","d ...
- Node.js 第三方包的安装、升级、卸载,以及包依赖管理
本地安装: npm install package-name 全局全装: npm install -g package-name 举个栗子 全局安装 React项目的脚手架 npm install ...
- Codeforces Round #566 (Div. 2)
Codeforces Round #566 (Div. 2) A Filling Shapes 给定一个 \(3\times n\) 的网格,问使用 这样的占三个格子图形填充满整个网格的方案数 如果 ...
- RTC-IC-PCF2129
一特点: -20~70度,SPI/I2C接口,1.2 V to 4.2 V ,可编程看门狗,时钟输出以便校准,闹钟输出,时间戳输出.低功耗高精度,电源切换,中断输出. SPI接口和I2C接口硬件接法: ...
- 前端开发如何做好SEO优化的工作
前端开发工程师不仅需要要跟视觉设计师.交互式设计师配合,完美还原设计图稿,编写兼容各大浏览器.加载速度快.用户体验好的页面.现在还需要跟SEO人员配合,调整页面的代码结构和标签. 一些成熟的平台,在开 ...
- logback整合Logstash
1.依赖 <dependency> <groupId>net.logstash.logback</groupId> <artifactId>logsta ...
- RHEL/CentOS 7.X 安装笔记
配置vim # 配置 vim 编辑器 yum install vim rm /usr/bin/vi ln -s /usr/bin/vim /usr/bin/vi vi /etc/vimrc # 开启语 ...
- Java基础:(三)运算
一.参数传递 Java的参数是以值传递的形式传入方法中,而不是引用传递. 二.隐式类型转换 Java不能隐式执行向下转型,因为这会使精度降低:但是使用 += 运算符可以执行隐式类型转换. float ...
- @ConfigurationProperties
功能 将属性文件与一个Java类绑定,属性文件中的变量与Java类中的成员变量一一对应,无需完全一致. 如需将 @ConfigurationProperties 注解的目标类添加到Spring IOC ...
- AJPFX关于Java中的集合
ava API中所用的集合类,都是实现了Collection接口,他的一个类继承结构如下: Collection<--List<--Vector Collection<--List& ...