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