CSS3象棋效果

快乐打工仔发布于 3年前分类：实例代码
CSS3象棋效果属于前端实例代码，有关更多实例代码大家可以查看。
分享一段代码实例，它利用css3实现了象棋棋盘和象棋棋子的效果。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #c8c8c8;
}
ul li {
list-style: none;
}
#outBorder {
width: 530px;
height: 650px;
border: 2px solid #960;
margin: 50px auto;
text-align: center;
position: relative;
background-color: #634223;
}
#outBorder h1 {
line-height: 80px;
}
#outBorder > ul {
font-size: 0;
width: 400px;
border: 3px solid #6B1C0F;
padding: 3px 1px;
margin: auto auto;
background-color: #FFCE95;
}
#outBorder ul > li:first-child ul li {
border-top: 1px solid #222;
}
#outBorder ul > li ul li:first-child {
border-left: 1px solid #222;
}
#outBorder ul > li ul li {
width: 48px;
height: 48px;
border-right: 1px solid #222;
border-bottom: 1px solid #222;
display: inline-block;
position: relative;
}
.bottomright {
display: inline-block;
position: absolute;
bottom: 3px;
right: 3px;
padding: 5px;
border-right: 1px solid #222;
border-bottom: 1px solid #222;
}
.topleft {
display: inline-block;
position: absolute;
top: 3px;
left: 3px;
padding: 5px;
border-left: 1px solid #222;
border-top: 1px solid #222;
}
.bottomleft {
display: inline-block;
position: absolute;
bottom: 3px;
left: 3px;
padding: 5px;
border-left: 1px solid #222;
border-bottom: 1px solid #222;
}
.topright {
display: inline-block;
position: absolute;
top: 3px;
right: 3px;
padding: 5px;
border-right: 1px solid #222;
border-top: 1px solid #222;
}
.xiaxie {
display: inline-block;
width: 69px;
height: 0px;
position: absolute;
border-bottom: 2px dashed #222;
transform: rotate(45deg);
left: -10px;
top: 24px;
}
.shangxie {
display: inline-block;
width: 69px;
height: 0px;
position: absolute;
border-bottom: 2px dashed #222;
transform: rotate(-45deg);
left: -10px;
top: 24px;
}
#outBorder > ul > li:nth-child(5) > ul > li {
border-right: 1px solid #FFCE95;
}
#outBorder > ul > li:nth-child(5) > ul > li:last-child {
border-right: 1px solid #222;
}
#hanjie, #chuhe {
display: inline-block;
font-size: 20px;
line-height: 30px;
position: absolute;
}
#hanjie {
top: 290px;
left: 352px;
}
#chuhe {
top: 290px;
left: 137px;
}
#qihe {
width: 300px;
height: 90px;
margin: 10px auto;
}
.chessPieces {
width: 40px;
height: 40px;
background-color: #b7b7b7;
border-radius: 100%;
float: left;
margin: 1px;
}
.chessPieces > div {
width: 80%;
height: 80%;
background-color: #c8c8c8;
border-radius: 100%;
margin: auto auto;
position: relative;
border: 1px solid #222;
top: 3px;
text-align: center;
}
.chessPieces > div span {
font-weight: 900;
font-size: 16px;
padding: 0px;
position: relative;
border-radius: 100%;
background-color: #c8c8c8;
top: 7px;
}
.black > div {
color: black;
border-color: #222;
}
.red > div {
color: #a00;
border-color: #a00;
}
</style>
</head>
<body>
<div id="outBorder">
<h1>chiness chess</h1>
<ul>
<li>
<ul>
<li></li>
<li></li>
<li></li>
<li><span class="xiaxie"></span></li>
<li><span class="shangxie"></span></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>
<ul>
<li><span class="bottomright"></span></li>
<li><span class="bottomleft"></span></li>
<li></li>
<li><span class="shangxie"></span></li>
<li><span class="xiaxie"></span></li>
<li></li>
<li><span class="bottomright"></span></li>
<li><span class="bottomleft"></span></li>
</ul>
</li>
<li>
<ul>
<li><span class="topright"></span><span class="bottomleft"></span></li>
<li><span class="bottomright"></span><span class="topleft"></span></li>
<li><span class="bottomleft"></span></li>
<li><span class="bottomright"></span></li>
<li><span class="bottomleft"></span></li>
<li><span class="bottomright"></span></li>
<li><span class="bottomleft"></span><span class="topright"></span></li>
<li><span class="bottomright"></span><span class="topleft"></span></li>
</ul>
</li>
<li>
<ul>
<li><span class="topleft"></span></li>
<li><span class="topright"></span></li>
<li><span class="topleft"></span></li>
<li><span class="topright"></span></li>
<li><span class="topleft"></span></li>
<li><span class="topright"></span></li>
<li><span class="topleft"></span></li>
<li><span class="topright"></span></li>
</ul>
</li>
<li id="hejie">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<span id="chuhe">楚河</span>
<span id="hanjie">界汉</span>
</li>
<li>
<ul>
<li><span class="bottomleft"></span></li>
<li><span class="bottomright"></span></li>
<li><span class="bottomleft"></span></li>
<li><span class="bottomright"></span></li>
<li><span class="bottomleft"></span></li>
<li><span class="bottomright"></span></li>
<li><span class="bottomleft"></span></li>
<li><span class="bottomright"></span></li>
</ul>
</li>
<li>
<ul>
<li><span class="topleft"></span><span class="bottomright"></li>
<li><span class="topright"></span><span class="bottomleft"></span></li>
<li><span class="topleft"></span></li>
<li><span class="topright"></span></li>
<li><span class="topleft"></span></li>
<li><span class="topright"></span></li>
<li><span class="topleft"></span><span class="bottomright"></li>
<li><span class="topright"></span><span class="bottomleft"></span></li>
</ul>
</li>
<li>
<ul>
<li><span class="topright"></span></li>
<li><span class="topleft"></span></li>
<li></li>
<li><span class="xiaxie"></span></li>
<li><span class="shangxie"></span></li>
<li></li>
<li><span class="topright"></span></li>
<li><span class="topleft"></span></li>
</ul>
</li>
<li>
<ul>
<li></li>
<li></li>
<li></li>
<li><span class="shangxie"></span></li>
<li><span class="xiaxie"></span></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
<div id="qihe">
<div class="chessPieces black">
<div>
<span>将</span>
</div>
</div>
<div class="chessPieces black">
<div>
<span>士</span>
</div>
</div>
<div class="chessPieces black">
<div>
<span>象</span>
</div>
</div>
<div class="chessPieces black">
<div>
<span>马</span>
</div>
</div>
<div class="chessPieces black">
<div>
<span>车</span>
</div>
</div>
<div class="chessPieces black">
<div>
<span>炮</span>
</div>
</div>
<div class="chessPieces black">
<div>
<span>卒</span>
</div>
</div>
<div class="chessPieces red">
<div>
<span>帅</span>
</div>
</div>
<div class="chessPieces red">
<div>
<span>仕</span>
</div>
</div>
<div class="chessPieces red">
<div>
<span>相</span>
</div>
</div>
<div class="chessPieces red">
<div>
<span>马</span>
</div>
</div>
<div class="chessPieces red">
<div>
<span>车</span>
</div>
</div>
<div class="chessPieces red">
<div>
<span>炮</span>
</div>
</div>
<div class="chessPieces red">
<div>
<span>兵</span>
</div>
</div>
</div>
</div>
</body>
</html>
CSS3象棋效果，这样的场景在实际项目中还是用的比较多的，关于CSS3象棋效果就介绍到这了。
我来回复
暂无回复内容