js+css实现充满设计感的调色板旋转展开动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：js+css实现充满设计感的调色板旋转展开动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>
  <meta charset="UTF-8">
  


  
  
<style>
body {
	background-color: Snow;
}

#container {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

button {
	width: 120px;
	height: 120px;
	border-radius: 999px;
	border: none;
	z-index: 4;
	transition: all 0.2s cubic-bezier(0.38, 0.25, 0.47, 0.57);
}

/* Picker button */
button:hover {
	cursor: pointer;
	background-color: whitesmoke;
	box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
}

button:active {
	background-color: #f1f1f1;
}

.swatches {
	transform: translate(-50px, -375px);
	border: 1px solid black;
}

/* Swatch */
.swatch {
	position: absolute;
	display: flex;
	flex-direction: column-reverse;
	height: 300px;
	width: 100px;
	transform-origin: bottom center;
	transition-function: cubic-bezier(0.38, 0.25, 0.47, 0.87);
	transition-delay: 0.75s;
}

.mini-swatch {
	height: 0%;
	width: 100px;
	transition: border-color 0.1s cubic-bezier(0.38, 0.25, 0.47, 0.87);
	transition: height 1s cubic-bezier(0.38, 0.25, 0.47, 0.87);
	box-sizing: border-box;
	z-index: 2;
	cursor: pointer;
}

.mini-swatch::before {
	width: 100%;
	height: 75px;
	position: absolute;
	color: black;
	content: attr(id);
}

.mini-swatch--open {
	height: 100% !important;
	transition: height 1s cubic-bezier(0.38, 0.25, 0.47, 0.87) 0.5s !important;
}

input {
	display: none;
}

.mini-swatch label {
	position: absolute;
	display: block;
	width: 100%;
	height: 75px;
  box-sizing: border-box;
  border: 1px solid #ffffff00;
  transition: all 0.2s cubic-bezier(0.38, 0.25, 0.47, 0.87);
}

.mini-swatch label:hover {
  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.24);
  border: 1px solid #ffffff64; 
	cursor: pointer;
}

#r.swatch {
	transition-duration: 0.2s;
}
#ro.swatch {
	transition-duration: 0.3s;
}
#o.swatch {
	transition-duration: 0.4s;
}
#yo.swatch {
	transition-duration: 0.5s;
}
#y.swatch {
	transition-duration: 0.6s;
}
#yg.swatch {
	transition-duration: 0.7s;
}
#g.swatch {
	transition-duration: 0.8s;
}
#bg.swatch {
	transition-duration: 0.9s;
}
#b.swatch {
	transition-duration: 1s;
}
#bi.swatch {
	transition-duration: 1.1s;
}
#i.swatch {
	transition-duration: 1.2s;
}
#vi.swatch {
	transition-duration: 1.3s;
}
#v.swatch {
	transition-duration: 1.4s;
}
</style>

  
  
</head>

<body >
  <div id="container">
  <button id="picker">
    Select Color
  </button>

  <div class="swatches">
    <div class="swatch" id="v">
      <div class="mini-swatch" style="background-color: #C51162">
        <input type="radio" name="swatch-select" id="#C51162" value="#C51162">
        <label for="#C51162"></label>
      </div>
      <div class="mini-swatch" style="background-color: #F50057">
        <input type="radio" name="swatch-select" id="#F50057" value="#F50057">
        <label for="#F50057"></label>
      </div>
      <div class="mini-swatch" style="background-color: #FF4081">
        <input type="radio" name="swatch-select" id="#FF4081" value="#FF4081">
        <label for="#FF4081"></label>
      </div>
      <div class="mini-swatch" style="background-color: #FF80AB">
        <input type="radio" name="swatch-select" id="#FF80AB" value="#FF80AB">
        <label for="#FF80AB"></label>
      </div>
    </div>

    <div class="swatch" id="vi">
      <div class="mini-swatch" style="background-color: #AA00FF">
        <input type="radio" name="swatch-select" id="#AA00FF" value="#AA00FF">
        <label for="#AA00FF"></label>
      </div>
      <div class="mini-swatch" style="background-color: #D500F9">
        <input type="radio" name="swatch-select" id="#D500F9" value="#D500F9">
        <label for="#D500F9"></label>
      </div>
      <div class="mini-swatch" style="background-color: #E040FB">
        <input type="radio" name="swatch-select" id="#E040FB" value="#E040FB">
        <label for="#E040FB"></label>
      </div>
      <div class="mini-swatch" style="background-color: #EA80FC">
        <input type="radio" name="swatch-select" id="#EA80FC" value="#EA80FC">
        <label for="#EA80FC"></label>
      </div>
    </div>

    <div class="swatch" id="i">
      <div class="mini-swatch" style="background-color: #6200EA">
        <input type="radio" name="swatch-select" id="#6200EA" value="#6200EA">
        <label for="#6200EA"></label>
      </div>
      <div class="mini-swatch" style="background-color: #651FFF">
        <input type="radio" name="swatch-select" id="#651FFF" value="#651FFF">
        <label for="#651FFF"></label>
      </div>
      <div class="mini-swatch" style="background-color: #7C4DFF">
        <input type="radio" name="swatch-select" id="#7C4DFF" value="#7C4DFF">
        <label for="#7C4DFF"></label>
      </div>
      <div class="mini-swatch" style="background-color: #B388FF">
        <input type="radio" name="swatch-select" id="#B388FF" value="#B388FF">
        <label for="#B388FF"></label>
      </div>
    </div>

    <div class="swatch" id="bi">
      <div class="mini-swatch" style="background-color: #304FFE">
        <input type="radio" name="swatch-select" id="#304FFE" value="#304FFE">
        <label for="#304FFE"></label>
      </div>
      <div class="mini-swatch" style="background-color: #3D5AFE">
        <input type="radio" name="swatch-select" id="#3D5AFE" value="#3D5AFE">
        <label for="#3D5AFE"></label>
      </div>
      <div class="mini-swatch" style="background-color: #536DFE">
        <input type="radio" name="swatch-select" id="#536DFE" value="#536DFE">
        <label for="#536DFE"></label>
      </div>
      <div class="mini-swatch" style="background-color: #8C9EFF">
        <input type="radio" name="swatch-select" id="#8C9EFF" value="#8C9EFF">
        <label for="#8C9EFF"></label>
      </div>
    </div>

    <div class="swatch" id="b">
      <div class="mini-swatch" style="background-color: #2962FF">
        <input type="radio" name="swatch-select" id="#2962FF" value="#2962FF">
        <label for="#2962FF"></label>
      </div>
      <div class="mini-swatch" style="background-color: #2979FF">
        <input type="radio" name="swatch-select" id="#2979FF" value="#2979FF">
        <label for="#2979FF"></label>
      </div>
      <div class="mini-swatch" style="background-color: #448AFF">
        <input type="radio" name="swatch-select" id="#448AFF" value="#448AFF">
        <label for="#448AFF"></label>
      </div>
      <div class="mini-swatch" style="background-color: #82B1FF">
        <input type="radio" name="swatch-select" id="#82B1FF" value="#82B1FF">
        <label for="#82B1FF"></label>
      </div>
    </div>

    <div class="swatch" id="bg">
      <div class="mini-swatch" style="background-color: #00B8D4">
        <input type="radio" name="swatch-select" id="#00B8D4" value="#00B8D4">
        <label for="#00B8D4"></label>
      </div>
      <div class="mini-swatch" style="background-color: #00E5FF">
        <input type="radio" name="swatch-select" id="#00E5FF" value="#00E5FF">
        <label for="#00E5FF"></label>
      </div>
      <div class="mini-swatch" style="background-color: #18FFFF">
        <input type="radio" name="swatch-select" id="#18FFFF" value="#18FFFF">
        <label for="#18FFFF"></label>
      </div>
      <div class="mini-swatch" style="background-color: #84FFFF">
        <input type="radio" name="swatch-select" id="#84FFFF" value="#84FFFF">
        <label for="#84FFFF"></label>
      </div>
    </div>

    <div class="swatch" id="g">
      <div class="mini-swatch" style="background-color: #00C853">
        <input type="radio" name="swatch-select" id="#00C853" value="#00C853">
        <label for="#00C853"></label>
      </div>
      <div class="mini-swatch" style="background-color: #00E676">
        <input type.........完整代码请登录后点击上方下载按钮下载查看