54.纯 CSS 创作一副国际象棋
原文地址：https://segmentfault.com/a/1190000015310484
感想：棋盘是 CSS 画的，棋子是 unicode 字符。
HTML code：
<html>
<head>
<link rel="stylesheet" href="index.css">
<title>棋盘是 CSS 画的，棋子是 unicode 字符。</title>
</head>
<body>
<!-- 定义 dom，一共 8 个列表，每个列表包含 8 个元素 -->
<!-- 可以搜索象棋符：https://unicode-table.com/cn/sets/-->
<!-- 博客园：http://www.cnblogs.com/change-oneself/p/5329837.html-->
<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>
</html>
CSS code：
html, body, ul {
margin:;
padding:;
}
/* body子元素水平垂直居中 */
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: darkslategray;
}
/* 设置.chess容器的样式 */
.chess{
font-size: 32px;
background-color: burlywood;
border: 0.2em solid tan;
box-shadow: 0 0.3em 2em 0.4em rgba(0, 0, 0, 0.3);
}
/* 画出网格状棋盘 */
.chess ul{
display: table;
}
.chess ul:nth-child(-n+2) {
color: black;
}
.chess ul:nth-child(n+7) {
color: white;
}
.chess ul li{
display: table-cell;
width: 1.5em;
height: 1.5em;
text-align: center;
line-height: 1.5em;
/* 给字符（符号）加粗 */
font-weight: bold;
}
/* 设置网格交错的颜色 */
.chess ul:nth-child(odd) li:nth-child(even),
ul:nth-child(even) li:nth-child(odd){
background-color: rgba(0, 0, 0, 0.6);
}
54.纯 CSS 创作一副国际象棋的更多相关文章
- 如何用纯 CSS 创作一副国际象棋
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/WyXrjz 可交互视频 ...
- 3.纯 CSS 创作一个容器厚条纹边框特效
原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...
- 2.纯 CSS 创作一个矩形旋转 loader 特效
原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR 扩展地址:https://codepen.io/pen/ HT ...
- 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）
原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...
- 前端每日实战：113# 视频演示如何用纯 CSS 创作一个赛车 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/mGdXGJ 可交互视频 此视频是可 ...
- 75.纯 CSS 创作一支摇曳着烛光的蜡烛
原文地址:https://segmentfault.com/a/1190000015580809 学习后效果地址:https://scrimba.com/c/c8PQ3PTB 感想:CSS 真强大! ...
- 74.纯 CSS 创作一台 MacBook Pro
原文地址:https://segmentfault.com/a/1190000015568609 HTML code: <div class="macbook"> &l ...
- 73.纯 CSS 创作一只卡通狐狸
原文地址:https://segmentfault.com/a/1190000015566332 学习效果地址:https://scrimba.com/c/cz6EzdSd 感想:过渡效果,圆角,定位 ...
- 72.纯 CSS 创作气泡填色的按钮特效
原文地址:https://segmentfault.com/a/1190000015560736 感想:过渡效果+xyz中一轴. HTML code: <nav> <ul> & ...
随机推荐
- 关于div
<article id="a"> <div class="a1"></div> <div class="a2 ...
- innobackupex per table
#innobackupex export tableinnobackupex --defaults-file=/etc/my.cnf --sock=/data/3306/mysql_3306.sock ...
- svn hooks post-commit钩子自动部署
#!/bin/sh #修改为服务编码 export LANG=zh_CN.utf- #Set variable REPOS="$1" REV="$2" SVN= ...
- WPF Demo17 数据绑定
实例一:以资源的形式实现 namespace 数据绑定1 { public class Student { public int Id { get; set; } public string Name ...
- linux svn客户端通过 https访问windows VisualSVN Server Manager
1)需求: 已经在阿里云windwos系统 下面安装了VisualSVN Server Manager 做为svn服务器: 现在要在腾讯云源码安装新版本客户端 2)开始源码编译安装TortoiseSV ...
- Hive格式各种格式下不同压缩算法的比较
原始Text格式的hive分区大小为119.2G. 压缩算法 Text格式 Parquet格式 ORC RCFile 不压缩 119.2G 54.1G 20.0G 98G Snappy压缩 30.2 ...
- maven的包冲突
maven的间接引用会引入其他未声明的包,maven自身的冲突解决方案,最终引用的包可能不是希望的版本. 直接声明期望的版本号,就没有间接引用的问题. 子模块很多时,可以使用dependencyMan ...
- [UE4]通过IP地址加入游戏
- Mongodb集群搭建之 Sharding+ Replica Sets集群架构
1.本例使用1台Linux主机,通过Docker 启动三个容器 IP地址如下: docker run -d -v `pwd`/data/master:/mongodb -p 27017:27017 d ...
- Linux下安装与卸载anaconda
安装:到安装文件夹的目录下输入 bash Anaconda3-4.1.1-Linux-x86_64.sh 卸载:输入