CSS3象棋效果

螞蟻小編發表於2018-07-02

分享一段程式碼例項，它利用css3實現了象棋棋盤和象棋棋子的效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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 文字效果
2020-04-06
CSSS3
CSS3空心圓效果
2018-09-05
CSSS3
CSS3呼吸燈效果
2018-08-31
CSSS3
CSS3 矩形切角效果
2019-01-25
CSSS3
CSS3哭臉效果
2018-03-19
CSSS3
CSS3翻轉效果
2018-07-02
CSSS3
CSS3動畫效果下拉導航選單效果
2018-06-08
CSSS3動畫
CSS3圓環效果程式碼
2018-07-18
CSSS3
CSS3箭靶效果程式碼
2018-07-11
CSSS3
CSS3花屏文字效果
2018-07-12
CSSS3
CSS3時間軸效果
2017-04-05
CSSS3
CSS3白鶴展翅效果
2018-07-09
CSSS3
CSS3 checkbox美化效果
2018-07-04
CSSS3
CSS3動畫按鈕效果
2018-07-04
CSSS3動畫
CSS3 旋轉魔方效果
2017-02-26
CSSS3
css3實現翻牌效果
2017-12-14
CSSS3
CSS3圓角表格效果
2018-01-03
CSSS3
css3的半透明效果
2018-01-02
CSSS3
CSS3 Loading效果
2015-06-20
CSSS3
css3過渡效果詳解
2020-04-05
CSSS3
CSS3圖片旋轉效果
2018-08-08
CSSS3
CSS3對勾效果詳解
2018-09-16
CSSS3
CSS3圖片拉近放大效果
2018-09-12
CSSS3
CSS3載入等待動畫效果
2018-07-23
CSSS3動畫
CSS3現菱形效果程式碼
2018-07-22
CSSS3
CSS3多面體旋轉效果
2018-07-17
CSSS3
CSS3星系旋轉效果代
2018-07-17
CSSS3
CSS3多層邊框效果
2018-07-17
CSSS3
css3動畫完成打字機效果
2020-12-25
CSSS3動畫
CSS3 光弧擴散效果
2018-06-02
CSSS3
CSS3 div水平運動效果
2018-03-14
CSSS3
CSS3大熊貓卡通效果
2018-05-22
CSSS3
CSS3郵票鋸齒效果
2018-05-05
CSSS3
CSS3環形輻射效果
2018-07-03
CSSS3
CSS3文字模糊效果
2018-07-02
CSSS3
CSS3 立方體翻轉效果
2017-05-04
CSSS3
CSS3矩形左右擺動效果
2017-02-27
CSSS3
Python3+pygame中國象棋程式碼完整非常好有效果演示
2021-03-04
PythonGAM

CSS3象棋效果

相關文章