无图片纯css实现中国象棋棋子

纯当锻炼前端编程能力了，效果还不错。纯用css不用图片的好处就是加载迅速。代码如下：

<!doctype html>
<head>
<style>
.pieces{width:84px;height:84px;border-radius:50px;border:rgb(78,56,23) double 8px;background-color:rgb(192,149,106);margin:auto;text-align:center;font:77px "楷体";line-height:84px;text-shadow:0px 0px 2px white;box-shadow:3px 3px 2px black;float:left;margin:10px;
}
.red{color:rgb(144,11,11);border-color:rgb(144,11,11)}
.black{color:rgb(78,56,23)}
</style>
</head>
<body><script>var red_names = ['車','馬','炮','帥','仕','相','兵'];var black_names = ['车','馬','炮','將','士','象','卒'];for (var i = 0;i < red_names.length;++i)document.write("<div class='pieces red'>"+red_names[i]+"</div>");for (var i = 0;i < black_names.length;++i)document.write("<div class='pieces black'>"+black_names[i]+"</div>");</script><div class='pieces black'>鞠</div><div class='pieces black'>培</div><div class='pieces black'>中</div>
</body>

效果如下：

无图片纯css实现中国象棋棋子相关推荐

中国象棋棋子及棋盘的绘制
一．题目简介本课程设计主要是使用Swing这个Java自带的图形开发工具实现中国象棋棋子及棋盘的绘制,并根据相应的象棋规则,可以设计棋谱,完成棋谱的保存和对已保存的棋谱的演示,方便现在爱棋人士对残局 ...
中国象棋棋子移动规则详解（Qt）
一.象棋介绍中国象棋是起源于中国的一种棋,属于二人对抗性游戏的一种,在中国有着悠久的历史.由于用具简单,趣味性强,成为流行极为广泛的棋艺活动. 中国象棋是中国棋文化,也是中华民族的文化瑰宝,它源远流 ...
css 加载图片,纯CSS图片预加载
译自:[Creating a CSS Image Preloader](http://www.devirtuoso.com/2009/07/creating-a-css-image-preloader ...
java象棋无框架版_Java版中国象棋
/* *中国象棋Java *作者:yanick *源文件:Chess.java *最后修改时间:2006-11-1 *添加功能:实现了当前棋局的保存 *Chess.java */ import jav ...
用java定义中国象棋的棋子_中国象棋棋子定义代码java
棋盘和棋子象棋是棋子共三十二个,分为红黑两组,各十六个,由对弈双方各执一组,兵种是一样的,分为七种: 红方:帅.仕.相.车.马.炮.兵黑方:将.士.象.车.马.炮.卒其中帅与将.仕与士.相与象. ...
[JavaScript] CocosCreator 中国象棋 —— 棋子移动
之前想用cocos2dx开发这个游戏来着,真是太Naive了.我掌握的C++生得发指,这里啥都看不懂那里一片红波浪,好不容易倒退了一百步解决了一运行又是迷之错误,再加上之前那个i3 2G的辣鸡电脑李时 ...
html slider图片,纯CSS的Slider
Step1:图片定位 HTML Markup CSS Style .slider-container { position: absolute; width: 100vw; height: 100vh ...
用html+css+js实现中国象棋小游戏开发项目
用html+css+js中国象棋小游戏开发项目最近刚学习完JS的相关课程,跟着老师做了两个小游戏项目,就已经抑制不住内心的小激动,想着要迫不及待的着手准备做一个网页小游戏--中国象棋由于从小就比较 ...
C++实现双人中国象棋（一）——算法篇（附完整代码）
一.简介最近突发奇想,要使用C++做一个双人象棋的程序,昨天肝了一天,终于把算法部分完成了,下面把开发过程中的经验分享一下. 开发环境:Visual Studio 2019 语言标准:C++11及以 ...

无图片纯css实现中国象棋棋子

无图片纯css实现中国象棋棋子相关推荐

最新文章

热门文章