css实现一个彩色画板效果代码-html代码-BFW代码库

代码语言：html
代码描述：css实现一个彩色画板效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

::-webkit-scrollbar {
  width: 0;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.container {
  position: absolute;
  width: 100%;
  height: auto;
  background-image: linear-gradient(135deg, #f06966, #fad6a6);
}

.paletteWrap {
  position: relative;
  width: 1230px;
  margin: 50px auto;
}

.paletteItem {
  float: left;
  padding: 20px;
  margin-bottom: 50px;
  margin-right: 50px;
  background-color: #f7e0b5;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.paletteItem:nth-child(4n) {
  margin-right: 0;
}

.paletteItem__schemeBox {
  position: relative;
  margin-bottom: 15px;
  width: 230px;
  height: 310px;
  background-color: #fff8e7;
}

.paletteItem__colorScheme {
  position: absolute;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.paletteItem__colorScheme_square {
  top: 65px;
  left: 15px;
  width: 100px;
  height: 100px;
}
.paletteItem__colorScheme_square .paletteItem__colorItem {
  width: 50%;
  height: 50%;
}
.paletteItem__colorScheme_vertical {
  top: 15px;
  right: 15px;
  width: 50px;
  height: 200px;
}
.paletteItem__colorScheme_vertical .paletteItem__colorItem {
  width: 100%;
  height: 25%;
}
.paletteItem__colorScheme_horizontal {
  bottom: 20px;
  left: 15px;
  width: 200px;
  height: 50px;
}
.paletteItem__colorScheme_horizontal .paletteItem__colorItem {
  width: 25%;
  height: 100%;
}

.paletteItem__colorItem {
  float: left;
}

.paletteItem__infoBox {
  width: 230px;
  height: 50px;
}

.paletteItem__colorBox {
  float: left;
  width: 50%;
  height: 25px;
}

.paletteItem__colorName {
  text-align: center;
  font-family: "Galeria-Medium";
}

.paletteItem__colorItem_1 {
  background-color: #f5f4e8;
}

.paletteItem__colorItem_2 {
  background-color: #c50d66;
}

.paletteItem__colorItem_3 {
  background-color: #f07810;
}

.paletteItem__colorItem_4 {
  background-color: #eec60a;
}

.paletteItem__colorItem_5 {
  background-color: #13334c;
}

.paletteItem__colorItem_6 {
  background-color: #005792;
}

.paletteItem__colorItem_7 {
  background-color: #f6f6e9;
}

.paletteItem__colorItem_8 {
  background-color: #fd5f00;
}

.paletteItem__colorItem_9 {
  background-color: #57D1C9;
}

.paletteItem__colorItem_10 {
  background-color: #ED5485;
}

.paletteItem__colorItem_11 {
  background-color: #FFFBCB;
}

.paletteItem__colorItem_12 {
  background-color: #FFE869;
}

.paletteItem__colorItem_13 {
  background-color: #F8F9FC;
}

.paletteItem__colorItem_14 {
  background-color: #C00000;
}

.paletteItem__colorItem_15 {
  background-color: #DE3C3C;
}

.paletteItem__colorItem_16 {
  background-color: #F7B32D;
}

.paletteItem__colorItem_17 {
  background-color: #003246;
}

.paletteItem__colorItem_18 {
  background-color: #E4491C;
}

.paletteItem__colorItem_19 {
  background-color: #0387B1;
}

.paletteItem__colorItem_20 {
  background-color: #F5F5F5;
}

.paletteItem__colorItem_21 {
  background-color: #ff5108;
}

.paletteItem__colorItem_22 {
  background-color: #fffdf8;
}

.paletteItem__colorItem_23 {
  background-color: #ff2321;
}

.paletteItem__colorItem_24 {
  background-color: #000000;
}

.paletteItem__colorItem_25 {
  background-color: #7abed1;
}

.paletteItem__colorItem_26 {
  background-color: #f05945;
}

.paletteItem__colorItem_27 {
  background-color: #f7f3e9;
}

.paletteItem__colorItem_28 {
  background-color: #f05945;
}

.paletteItem__colorItem_29 {
  background-color: #FFFC31;
}

.paletteItem__colorItem_30 {
  background-color: #F6F7EB;
}

.paletteItem__colorItem_31 {
  background-color: #E94F37;
}

.paletteItem__colorItem_32 {
  background-color: #393E41;
}

.paletteItem__colorItem_33 {
  background-color: #518f8b;
}

.paletteItem__colorItem_34 {
  background-color: #e3e1c8;
}

.paletteItem__colorItem_35 {
  background-color: #472c33;
}

.paletteItem__colorItem_36 {
  background-color: #e6462d;
}

.paletteItem__colorItem_37 {
  background-color: #c12127;
}

.paletteItem__colorItem_38 {
  background-color: #2a333c;
}

.paletteItem__colorItem_39 {
  background-color: #ffffff;
}

.paletteItem__colorItem_40 {
  background-color: #8f9299;
}

.paletteItem__colorItem_41 {
  background-color: #EDEDE4;
}

.paletteItem__colorItem_42 {
  background-color: #F74906;
}

.paletteItem__colorItem_43 {
  background-color: #554E44;
}

.paletteItem__colorItem_44 {
  background-color: #FFFFFF;
}

.paletteItem__colorItem_45 {
  background-color: #221E1D;
}

.paletteItem__colorItem_46 {
  background-color: #ECEAE0;
}

.paletteItem__colorItem_47 {
  background-color: #63AA9C;
}

.paletteItem__colorItem_48 {
  background-color: #E9633B;
}

.paletteItem__colorItem_49 {
  background-color: #a10015;
}

.paletteItem__colorItem_50 {
  background-color: #d52b15;
}

.paletteItem__colorItem_51 {
  background-color: #efeee9;
}

.paletteItem__colorItem_52 {
  background-color: #beb1b4;
}

.paletteItem__colorItem_53 {
  background-color: #222831;
}

.paletteItem__colorItem_54 {
  background-color: #393E46;
}

.paletteItem__colorItem_55 {
  background-color: #FD7013;
}

.paletteItem__colorItem_56 {
  background-color: #EEEEEE;
}

.paletteItem__colorItem_57 {
  background-color: #FF7260;
}

.paletteItem__colorItem_58 {
  background-color: #9BD7D5;
}

.paletteItem__colorItem_59 {
  background-color: #FFF5C3;
}

.paletteItem__colorItem_60 {
  background-color: #505050;
}

.paletteItem__colorItem_61 {
  background-color: #FF3B1D;
}

.paletteItem__colorItem_62 {
  background-color: #7BDFF2;
}

.paletteItem__colorItem_63 {
  background-color: #000000;
}

.paletteItem__colorItem_64 {
  background-color: #FFFFFF;
}

@media only screen and (max-width: 1280px) {
  .paletteWrap {
    width: 910px;
  }

  .paletteItem:nth-child(3n) {
    margin-right: 0;
  }
  .paletteItem:nth-child(4n) {
    margin-right: 50px;
  }
  .paletteItem:nth-child(12n) {
    margin-right: 0;
  }
}
@media only screen and (max-width: 960px) {
  .paletteWrap {
    width: 590px;
  }

  .paletteItem:nth-child(2n) {
    margin-right: 0;
  }
  .paletteItem:nth-child(3n) {
    margin-right: 50px;
  }
  .paletteItem:nth-child(6n) {
    margin-right: 0;
  }
}
@media only screen and (max-width: 642px) {
  .paletteWrap {
    width: 270px;
  }

  .paletteItem {
    margin-bottom: 50px;
    margin-right: 0;
  }
}
/*____________________________________________________________
## Developer Links
____________________________________________________________*/
.social {
  position: fixed;
  bottom: 0;
  left: 30px;
}

.socialList {
  list-style: none;
}
.socialList:after {
  content: "";
  display: block;
  margin: 0 auto;
  width: 1px;
  height: 40px;
  background: #f7e0b5;
}

.socialList__item {
  margin-bottom: 10px;
  width: 20px;
  height: 20px;
  transition: transform 0.2s;
}
.socialList__item:hover {
  transform: translateY(-3px);
}
.socialList__item:hover .socialList__icon {
  stroke: #7dcbd8;
}

.socialList__icon {
  fill: none;
  stroke: #f7e0b5;
}
</style>



</head>

<body translate="no" >
  <div class="container">
  <div class="paletteWrap clearfix">
        <div class="paletteItem">
          <div class="paletteItem__schemeBox">
            <div class="paletteItem__colorScheme paletteItem__colorScheme_square">
              <div class="paletteItem__colorItem paletteItem__colorItem_1"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_2"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_3"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_4"></div>
            </div>
            <div class="paletteItem__colorScheme paletteItem__colorScheme_vertical">
              <div class="paletteItem__colorItem paletteItem__colorItem_1"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_2"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_3"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_4"></div>
            </div>
            <div class="paletteItem__colorScheme paletteItem__colorScheme_horizontal">
              <div class="paletteItem__colorItem paletteItem__colorItem_1"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_2"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_3"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_4"></div>
            </div>
          </div>
          <div class="paletteItem__infoBox">
            <div class="paletteItem__colorBox">
              <p class="paletteItem__colorName">#f5f4e8</p>
            </div>
            <div class="paletteItem__colorBox">
              <p class="paletteItem__colorName">#c50d66</p>
            </div>
            <div class="paletteItem__colorBox">
              <p class="paletteItem__colorName">#f07810</p>
            </div>
            <div class="paletteItem__colorBox">
              <p class="paletteItem__colorName">#eec60a</p>
            </div>
          </div>
        </div>
        <div class="paletteItem">
          <div class="paletteItem__schemeBox">
            <div class="paletteItem__colorScheme paletteItem__colorScheme_square">
              <div class="paletteItem__colorItem paletteItem__colorItem_5"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_6"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_7"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_8"></div>
            </div>
            <div class="paletteItem__colorScheme paletteItem__colorScheme_vertical">
              <div class="paletteItem__colorItem paletteItem__colorItem_5"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_6"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_7"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_8"></div>
            </div>
            <div class="paletteItem__colorScheme paletteItem__colorScheme_horizontal">
              <div class="paletteItem__colorItem paletteItem__colorItem_5"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_6"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_7"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_8"></div>
            </div>
          </div>
          <div class="paletteItem__infoBox">
            <div class="paletteItem__colorBox">
              <p class="paletteItem__colorName">#13334c</p>
            </div>
            <div class="paletteItem__colorBox">
              <p class="paletteItem__colorName">#005792</p>
            </div>
            <div class="paletteItem__colorBox">
              <p class="paletteItem__colorName">#f6f6e9</p>
            </div>
            <div class="paletteItem__colorBox">
              <p class="paletteItem__colorName">#fd5f00</p>
            </div>
          </div>
        </div>
        <div class="paletteItem">
          <div class="paletteItem__schemeBox">
            <div class="paletteItem__colorScheme paletteItem__colorScheme_square">
              <div class="paletteItem__colorItem paletteItem__colorItem_9"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_10"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_11"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_12"></div>
            </div>
            <div class="paletteItem__colorScheme paletteItem__colorScheme_vertical">
              <div class="paletteItem__colorItem paletteItem__colorItem_9"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_10"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_11"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_12"></div>
            </div>
            <div class="paletteItem__colorScheme paletteItem__colorScheme_horizontal">
              <div class="paletteItem__colorItem paletteItem__colorItem_9"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_10"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_11"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_12"></div>
            </div>
          </div>
          <div class="paletteItem__infoBox">
            <div class="paletteItem__colorBox">
              <p class="paletteItem__colorName">#57D1C9</p>
            </div>
            <div class="paletteItem__colorBox">
              <p class="paletteItem__colorName">#ED5485</p>
            </div>
            <div class="paletteItem__colorBox">
              <p class="paletteItem__colorName">#FFFBCB</p>
            </div>
            <div class="paletteItem__colorBox">
              <p class="paletteItem__colorName">#FFE869</p>
            </div>
          </div>
        </div>
        <div class="paletteItem">
          <div class="paletteItem__schemeBox">
            <div class="paletteItem__colorScheme paletteItem__colorScheme_square">
              <div class="paletteItem__colorItem paletteItem__colorItem_13"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_14"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_15"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_16"></div>
            </div>
            <div class="paletteItem__colorScheme paletteItem__colorScheme_vertical">
              <div class="paletteItem__colorItem paletteItem__colorItem_13"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_14"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_15"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_16"></div>
            </div>
            <div class="paletteItem__colorScheme paletteItem__colorScheme_horizontal">
              <div class="paletteItem__colorItem paletteItem__colorItem_13"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_14"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_15"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_16"></div>
            </div>
          </div>
          <div class="paletteItem__infoBox">
            <div class="paletteItem__colorBox">
              <p class="paletteItem__colorName">#F8F9FC</p>
            </div>
            <div class="paletteItem__colorBox">
              <p class="paletteItem__colorName">#C00000</p>
            </div>
            <div class="paletteItem__colorBox">
              <p class="paletteItem__colorName">#DE3C3C</p>
            </div>
            <div class="paletteItem__colorBox">
              <p class="paletteItem__colorName">#F7B32D</p>
            </div>
          </div>
        </div>
        <div class="paletteItem">
          <div class="paletteItem__schemeBox">
            <div class="paletteItem__colorScheme paletteItem__colorScheme_square">
              <div class="paletteItem__colorItem paletteItem__colorItem_17"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_18"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_19"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_20"></div>
            </div>
            <div class="paletteItem__colorScheme paletteItem__colorScheme_vertical">
              <div class="paletteItem__colorItem paletteItem__colorItem_17"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_18"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_19"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_20"></div>
            </div>
            <div class="paletteItem__colorScheme paletteItem__colorScheme_horizontal">
              <div class="paletteItem__colorItem paletteItem__colorItem_17"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_18"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_19"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_20"></div>
            </div>
          </div>
          <div class="paletteItem__infoBox">
            <div class="paletteItem__colorBox">
              <p class="paletteItem__colorName">#003246</p>
            </div>
            <div class="paletteItem__colorBox">
              <p class="paletteItem__colorName">#E4491C</p>
            </div>
            <div class="paletteItem__colorBox">
              <p class="paletteItem__colorName">#0387B1</p>
            </div>
            <div class="paletteItem__colorBox">
              <p class="paletteItem__colorName">#F5F5F5</p>
            </div>
          </div>
        </div>
        <div class="paletteItem">
          <div class="paletteItem__schemeBox">
            <div class="paletteItem__colorScheme paletteItem__colorScheme_square">
              <div class="paletteItem__colorItem paletteItem__colorItem_21"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_22"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_23"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_24"></div>
            </div>
            <div class="paletteItem__colorScheme paletteItem__colorScheme_vertical">
              <div class="paletteItem__colorItem paletteItem__colorItem_21"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_22"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_23"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_24"></div>
            </div>
            <div class="paletteItem__colorScheme paletteItem__colorScheme_horizontal">
              <div class="paletteItem__colorItem paletteItem__colorItem_21"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_22"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_23"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_24"></div>
            </div>
          </div>
          <div class="paletteItem__infoBox">
            <div class="paletteItem__colorBox">
              <p class="paletteItem__colorName">#ff5108</p>
            </div>
            <div class="paletteItem__colorBox">
              <p class="paletteItem__colorName">#fffdf8</p>
            </div>
            <div class="paletteItem__colorBox">
              <p class="paletteItem__colorName">#ff2321</p>
            </div>
            <div class="paletteItem__colorBox">
              <p class="paletteItem__colorName">#000000</p>
            </div>
          </div>
        </div>
        <div class="paletteItem">
          <div class="paletteItem__schemeBox">
            <div class="paletteItem__colorScheme paletteItem__colorScheme_square">
              <div class="paletteItem__colorItem paletteItem__colorItem_25"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_26"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_27"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_28"></div>
            </div>
            <div class="paletteItem__colorScheme paletteItem__colorScheme_vertical">
              <div class="paletteItem__colorItem paletteItem__colorItem_25"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_26"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_27"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_28"></div>
            </div>
            <div class="paletteItem__colorScheme paletteItem__colorScheme_horizontal">
              <div class="paletteItem__colorItem paletteItem__colorItem_25"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_26"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_27"></div>
              <div class="paletteItem__colorItem paletteItem__colorItem_28"></div>
            </div>
          </div>
          <div class="paletteItem__infoBox">
            <div class="paletteItem__colorBox">
              <p class="paletteItem__colorName">#7abed1</p>
            </div>
            <div class="paletteItem__colorBox">
              <p class="paletteItem__colorName">#f05945</p>
            </div>
            <div class="paletteItem__colorBox">
              <p class="paletteItem__colorName">#f7f3e9</p>
            </div>
            <div class="paletteItem__colorBox">
              <p class="paletteItem__colorName">#f05945</p>
            </div>
          </div>
        </div>
.........完整代码请登录后点击上方下载按钮下载查看