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 .........完整代码请登录后点击上方下载按钮下载查看