angular+underscore+hammer实现太阳花取色器酷炫效果代码-html代码-BFW代码库

angular+underscore+hammer实现太阳花取色器酷炫效果代码

代码语言：html

所属分类：选择器

代码描述：angular+underscore+hammer实现太阳花取色器酷炫效果代码，点击色卡进行选择。

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

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

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        @charset "UTF-8";
    *, *::before, *::after {
      box-sizing: border-box;
    }
    
    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
      display: none !important;
    }
    
    [tap] {
      cursor: pointer;
    }
    
    .fg-light {
      color: #FFF;
    }
    
    .fg-dark {
      color: #363639;
    }
    
    .canvas {
      overflow: hidden;
      position: relative;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      z-index: 1;
      flex: 4;
      font-size: 1.3vmin;
      transition: 1.5s ease-in-out;
      cursor: default;
    }
    
    .dial {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      flex: none;
      background-image: radial-gradient(circle at 50% 50%, #fff, #000);
      mix-blend-mode: overlay;
    }
    
    .color-display {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      font-size: 1.35em;
    }
    .color-display a {
      text-decoration: none;
      color: inherit;
    }
    
    .color-brick {
      border-radius: 50%;
      flex: 0 0 auto;
      padding: 0;
      width: 100%;
      height: 100%;
      pointer-events: auto;
      box-shadow: 1.5em 0 2.5em -2em rgba(0, 0, 0, 0.65);
    }
    .color-brick.current::after {
      content: "";
      font-family: FontAwesome;
      font-size: 4.5vmin;
      position: absolute;
      top: 1em;
      left: 50%;
      transform: translateX(-50%);
    }
    
    .color-ring-outer {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) translateZ(0);
    }
    
    .color-ring {
      position: relative;
      width: 35em;
      height: 35em;
      pointer-events: none;
      border-radius: 100%;
      overflow: visible;
      transform-origin: 50% 50%;
      line-height: 0;
      transition: transform 0.3s ease-out;
    }
    .color-ring > div {
      display: flex;
      align-items: flex-start;
      justify-content: space-around;
      position: absolute;
      top: -12vmin;
      right: 50%;
      bottom: 50%;
      left: 50%;
      transform-origin: center bottom;
      transform: rotate(180deg);
      transition: transform 0.3s ease-out, top 0.3s ease-out;
    }
    .color-ring > div:nth-last-child(-n+2) {
      transition: none;
    }
    .color-ring > div:last-child {
      transform-origin: right bottom;
    }
    .color-ring > div:last-child .color-brick {
      pointer-events: none;
      border-radius: 0 100% 10%/20% 55%;
      box-shadow: 0.7em 1em 1.5em -1em rgba(0, 0, 0, 0.65);
    }
    .color-ring > div:last-child .color-brick::after {
      left: 0;
    }
    
    .color-info {
      position: relative;
      width: 13em;
      height: 13em;
      text-align: center;
      font-size: 2.1em;
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 100%;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
      transition: background 0.3s ease-out;
      box-shadow: 0 0.5em 4em -1em rgba(0, 0, 0, 0.9);
      border-radius: 100%;
    }
    .color-info > * + * {
      margin: 0;
    }
    
    html, body {
      margin: 0;
      height: 100%;
      display: flex;
      flex: 1;
      font-family: "DIN Alternate", monospace;
    }
    
    .panel {
      position: relative;
      flex: 1;
      padding: 0.5em;
      line-height: 1;
      background: #FFF;
      color: #363639;
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 1.5em;
      box-shadow: 0 0 2em -1em #363639;
      -webkit-user-select:.........完整代码请登录后点击上方下载按钮下载查看