CSS3象棋效果

螞蟻小編發表於2018-07-02
CSSS3
分享一段程式碼例項，它利用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>

相關文章