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

代码语言：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: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
    }
    .panel > div {
      flex: 1;
      text-align: center;
    }
    .panel .button {
      text-decoration: none;
      display: inline-block;
      white-space: nowrap;
      padding: 0.5em;
      border-radius: 0.25em;
      transition: 0.3s ease-out;
    }
    .panel .button:hover {
      box-shadow: 0 0.5em 1em -0.8em #363639;
      transform: scale(1.05);
    }
    .panel textarea {
      width: 100%;
      height: 4.5em;
      padding: 0.5em;
      margin: 1em 0;
      border: 1px solid #c3c3c4;
      border-radius: 0.25em;
      font-size: 1em;
      resize: vertical;
    }
    .panel textarea:focus {
      outline: none;
    }
    
    .love.fg-dark {
      -webkit-text-stroke: 0.05em #363639;
    }
    .love.fg-light {
      -webkit-text-stroke: 0.05em #FFF;
    }
    
    .button.fg-dark {
      border: 0.1em solid #363639;
    }
    .button.fg-light {
      border: 0.1em solid #FFF;
    }
    
    @media screen and (max-width: 40em), screen and (orientation: portrait) {
      body {
        flex-direction: column-reverse;
      }
    
      .canvas {
        flex: 1;
      }
    
      .panel {
        flex: 0 0 auto;
        flex-direction: row;
      }
      .panel textarea {
        flex: 1;
        margin: 0 1em;
        height: auto;
      }
      .panel .love, .panel .button {
        flex: 0 0 auto;
      }
    
      .color-ring {
        width: 24em;
        height: 24em;
      }
      .color-ring > div {
        top: -15vmin;
      }
    
      .color-info {
        width: 12em;
        height: 12em;
      }
    }
    </style>

</head>


<body class="ng-cloak" ng-app="app" ng-controller="appController">
    <div class="canvas" ng-style="{'background-color': color}">

        <div class="dial"></div>
        <div class="color-display" ng-class="setClasses(color, null, true)">

            <div class="color-ring-outer">
                <div class="color-ring" ng-style="setRingRotation()">
                    <div ng-repeat="c in shades track by $index" ng-style="setRotation($index)">
                        <div class="color-brick" tap="doIt(c)" ng-class="setClasses(c, color, false)" ng-style="{'backgroundColor': c}">
                        </div>
                    </div>
                </div>
            </div>

            <div class="color-info" ng-class="setClasses(tuner.hex, null, true)" ng-style="{'background': tuner.hex}">
                <h1>{{tuner.hex}}</h1>
                <div class="refresh" tap="doIt()"><i class="fa fa-refresh fa-3x fa-fw"></i></div>
            </div>

        </div>
    </div>

  

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/angular-1.4.6.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/underscore.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/hammer.min.js"></script>
    <script>
        (function($angular, _, Hammer) {
    	'use strict';
    	
    	$angular
    	.module('app', [])
    	.controller('appController', ['$scope', '$document', 'ColorService', 'UiHelpers', function($scope, $document, colors, ui) {
    
    		$scope.colorSteps = 6;
    		$scope.defaultColor = '#0ebeff';
    		$scope.hash = window.location.hash ? window.location.hash.replace('/', '') : $scope.defaultColor;
    
    		window.addEventListener('hashchange', function(e){
    			var color = '#' + e.newURL.split('#')[1];
    			if(color !== $scope.color) {
    				doIt(col.........完整代码请登录后点击上方下载按钮下载查看