环形颜色选择器复制效果代码
代码语言：html
所属分类：选择器
代码描述：环形颜色选择器复制效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@import url(https://fonts.googleapis.com/css?family=Lato:900,300);
html, body {
font-family: 'Lato';
text-align: center;
background: #FFFAE6;
color: #012744;
-webkit-transition: background .2s ease-in, color .2s ease;
transition: background .2s ease-in, color .2s ease;
}
*, *:before, *:after {
box-sizing: border-box;
}
.circle {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 50vmin;
height: 50vmin;
min-height: 220px;
min-width: 220px;
border-radius: 100%;
line-height: 50vmin;
text-decoration: none;
font-family: 'Lato';
font-weight: 900;
font-size: 35px;
color: inherit;
}
.circle:before, .circle:after {
content: '';
position: absolute;
border-radius: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: 40px 0 0 rgba(26, 34, 47, 0.5) inset, 0 40px 0 rgba(0, 142, 116, 0.5) inset, -40px 0 0 rgba(178, 224, 151, 0.5) inset, 0 -40px 0 rgba(210, 67, 53, 0.5) inset;
-webkit-transition: box-shadow .3s ease;
transition: box-shadow .3s ease;
}
.circle:after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.title {
margin-top: 20px;
margin-bottom: 5px;
font-size: 48px;
text-transform: capitalize;
}
.color-overview {
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
}
.color-overview > li {
display: inline-block;
vertical-align: bottom;
width: 20%;
height: 25px;
-webkit-transition: background .3s ease-in, height .2s ease;
transition: background .3s ease-in, height .2s ease;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
.color-overview > li:hover {
height: 40px;
}
.color-overview > li:nth-child(1) {
background: #1A222F;
}
.color-overview > li:nth-child(2) {
background: #008E74;
}
.color-overview > li:nth-child(3) {
background: #B2E097;
}
.color-overview > li:nth-child(4) {
background: #D24335;
}
.color-overview > li:nth-child(5) {
background: #1C3A40;
}
.color-overview:after {
content: '';
clear: both;
display: block;
}
.clipboard-info {
opacity: 0;
display: inline-block;
position: absolute;
bottom: 40px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background: #1A222F;
color: #FFFAE6;
padding: 4px 8px;
border-radius: 4px 4px 0 0;
}
.checkbox input {
display: inline-block;
width: 0;
height: 0;
overflow: hidden;
padding: 0;
margin: 0;
border: 0 none;
opacity: 0.001;
z-index: 1;
vertical-align: top;
outline: none;
}
.checkbox input + .checkbox-box {
display: block;
width: 36px;
height: 18px;
background: #D24335;
position: absolute;
left: 50%;
-webkit-transform: translate(-50%);
transform: translate(-50%);
border-radius: 4px;
-webkit-transition: background .3s ease;
transition: background .3s ease;
cursor: pointer;
}
.checkbox input + .checkbox-box:before {
content: '';
position: absolute;
display: block;
height: 18px;
width: 18px;
background: #1A222F;
border-radius: 4px;
-webkit-transition: right .3s ease;
transition: right .3s ease;
right: 18px;
}
.checkbox input:checked + .checkbox-box {
background: #B2E097;
}
.checkbox input:checked + .checkbox-box:before {
right: 0;
}
.checkbox > span {
position: absolute;
top: 310px;
}
.checkbox > .label:first-child {
right: 50%;
margin-right: 10px;
-webkit-transform: translate(-18px);
transform: translate(-18px);
}
.checkbox > .label:last-child {
left: 50%;
margin-left: 10px;
-webkit-transform: translate(18px);
transform: translate(18px);
}
</style>
</head>
<body translate="no" >
<style id="style"></style>
<h1 class="title">Custom</h1>
<a class="circle" href="#"> rnd.</a>
<!--<label class="checkbox">
<span class="label">Kuler</span>
<input type="checkbox"/>
<span class="checkbox-box"></span>
<span class="label">ColourLovers</span>
</label>-->
<span class="clipboard-info">Copied!</span>
<ul class="color-overview">
<li data-bg-color="#1A222F"></li><li data-bg-color="#008E74"></li><li data-bg-color="#B2E097"></li><li data-bg-color="#D24335"></li><li data-bg-color="#1C3A40"></li>
</ul>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script>
// TODO: use colourlovers-api
// http://www.colourlovers.com/api/palettes/top?format=json
/*!
* clipboard.js v1.5.2
* https://zenorocha.github.io/clipboard.js
*
* Licensed MIT © Zeno Rocha
*/
!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var e;e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,e.Clipboard=t()}}(function(){var t,e,n;return function t(e,n,r){function o(a,c){if(!n[a]){if(!e[a]){var s="function"==typeof require&&require;if(!c&&s)return s(a,!0);if(i)return i(a,!0);var u=new Error("Cannot find module '"+a+"'");throw u.code="MODULE_NOT_FOUND",u}var l=n[a]={exports:{}};e[a][0].call(l.exports,function(t){var n=e[a][1][t];return o(n?n:t)},l,l.exports,t,e,n,r)}return n[a].exports}for(var i="function"==typeof require&&require,a=0;a<r.length;a++)o(r[a]);return o}({1:[function(t,e,n){var r=t("matches-selector");e.exports=function(t,e,n){for(var o=n?t:t.parentNode;o&&o!==document;){if(r(o,e))return o;o=o.parentNode}}},{"matches-selector":2}],2:[function(t,e,n){function r(t,e){if(i)return i.call(t,e);for(var n=t.parentNode.querySelectorAll(e),r=0;r<n.length;++r)if(n[r]==t)return!0;return!1}var o=Element.prototype,i=o.matchesSelector||o.webkitMatchesSelector||o.mozMatchesSelector||o.msMatchesSelector||o.oMatchesSelector;e.exports=r},{}],3:[function(t,e,n){function r(t,e,n,r){var i=o.apply(this,arguments);return t.addEventListener(n,i),{destroy:function(){t.removeEventListener(n,i)}}}function o(t,e,n,r){return function(n){var o=i(n.target,e,!0);o&&(Object.defineProperty(n,"target",{value:o}),r.call(t,n))}}var i=t("closest");e.exports=r},{closest:1}],4:[function(t,e,n){n.node=function(t){return void 0!==t&&t instanceof HTMLElement&&1===t.nodeType},n.nodeList=function(t){var e=Object.prototype.toString.call(t);return void 0!==t&&("[object NodeList]"===e||"[object HTMLCollection]"===e)&&"length"in t&&(0===t.length||n.node(t[0]))},n.string=function(t){return"string"==typeof t||t instanceof String},n.function=function(t){var e=Object.prototype.toString.call(t);return"[object Function]"===e}},{}],5:[function(t,e,n){function r(t,e,n){if(!t&&!e&&!n)throw new Error("Missing required arguments");if(!c.string(e))throw new TypeError("Second argument must be a String");if(!c.function(n))throw new TypeError("Third argument must be a Function");if(c.node(t))return o(t,e,n);if(c.nodeList(t))return i(t,e,n);if(c.string(t))return a(t,e,n);throw new TypeError("First argument must be a String, HTMLElement, HTMLCollection, or NodeList")}function o(t,e,n){return t.addEventListener(e,n),{destroy:function(){t.removeEventListener(e,n)}}}function i(t,e,n){return Array.prototype.forEach.call(t,function(t){t.addEventListener(e,n)}),{destroy:function(){Array.prototype.forEach.call(t,function(t){t.removeEventListener(e,n)})}}}function a(t,e,n){return s(document.body,t,e,n)}var c=t("./is"),s=t("delegate");e.exports=r},{"./is":4,delegate:3}],6:[function(t,e,n){function r(t){var e;if("INPUT"===t.nodeName||"TEXTAREA"===t.nodeName)t.select(),e=t.value;else{var n=window.getSelection(),r=document.createRange();r.selectNodeContents(t),n.removeAllRanges(),n.addRange(r),e=n.toString()}return e}e.exports=r},{}],7:[function(t,e,n){function r(){}r.prototype={on:function(t,e,n){var r=this.e||(this.e={});return(r[t]||(r[t]=[])).push({fn:e,ctx:n}),this},once:function(t,e,n){function r(){o.off(t,r),e.apply(n,arguments)}var o=this;return r._=e,this.on(t,r,n)},emit:function(t){var e=[].slice.call(arguments,1),n=((this.e||(this.e={}))[t]||[]).slice(),r=0,o=n.length;for(r;o>r;r++)n[r].fn.apply(n[r].ctx,e);return this},off:function(t,e){var n=this.e||(this.e={}),r=n[t],o=[];if(r&&e)for(var i=0,a=r.length;a>i;i++)r[i].fn!==e&&r[i].fn._!==e&&o.push(r[i]);return o.length?n[t]=o:delete n[t],this}},e.exports=r},{}],8:[function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}n.__esModule=!0;var i=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),a=t("select"),c=r(a),s=function(){function t(e){o(this,t),this.resolveOptions(e),this.initSelection()}return t.prototype.resolveOptions=function t(){var e=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];this.action=e.action,this.emitter=e.emitter,this.target=e.target,this.text=e.text,this.trigger=e.trigger,this.selectedText=""},t.prototype.initSelection=function t(){if(this.text&&this.target)throw new Error('Multiple attributes declared, use either "target" or "text"');if(this.text)this.selectFake();else{if(!this.target)throw new Error('Missing required attributes, use either "target" or "text"');this.selectTarget()}},t.prototype.selectFake=function t(){var e=this;this.removeFake(),this.fakeHandler=document.body.addEventListener("click",function(){return e.removeFake()}),this.fakeElem=document.createElement("textarea"),this.fakeElem.style.position="absolute",this.fakeElem.style.left="-9999px",this.fakeElem.style.top=(window.pageYOffset||document.documentElement.scrollTop)+"px",this.fakeElem.setAttribute("readonly",""),this.fakeElem.value=this.text,document.body.appendChild(this.fakeElem),this.selectedText=c.default(this.fakeElem),this.copyText()},t.prototype.removeFake=function t(){this.fakeHandler&&(document.body.removeEventListener("click"),this.fakeHandler=null),this.fakeElem&&(document.body.removeChild(this.fakeElem),this.fakeElem=null)},t.prototype.selectTarget=function t(){this.selectedText=c.default(this.target),this.copyText()},t.prototype.copyText=function t(){var e=void 0;try{e=document.execCommand(this.action)}catch(n){e=!1}this.handleResult(e)},t.prototype.handleResult=function t(e){e?this.emitter.emit("success",{action:this.action,text:this.selectedText,trigger:this.trigger,clearSelection:this.clearSelection.bind(this)}):this.emitter.emit("error",{action:this.action,trigger:this.trigger,clearSelection:this.clearSelection.bind(this)})},t.prototype.clearSelection=function t(){this.target&&this.target.blur(),window.getSelection().removeAllRanges()},t.prototype.destroy=function t(){this.removeFake()},i(t,[{key:"action",set:function t(){var e=arguments.length<=0||void 0===arguments[0]?"copy":arguments[0];if(this._action=e,"copy"!==this._action&&"cut"!==this._action)throw new Error('Invalid "action" value, use either "copy" or "cut"')},get:function t(){return this._action}},{key:"target",set:function t(e){if(void 0!==e){if(!e||"object"!=typeof e||1!==e.nodeType)throw new Error('Invalid "target" value, use a valid Element');this._target=e}},get:function t(){return this._target}}]),t}();n.default=s,e.exports=n.default},{select:6}],9:[function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function a(t,e){var n="data-clipboard-"+t;if(e.hasAttribute(n))return e.getAttribute(n)}n.__esModule=!0;var c=t("./clipboard-action"),s=r(c),u=t("tiny-emitter"),l=r(u),f=t("good-listener"),d=r(f),h=function(t){function e(n,r){o(this,e),t.call(this),this.resolveOptions(r),this.listenClick(n)}return i(e,t),e.prototype.resolveOptions=function t(){var e=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];this.action="function"==typeof e.action?e.action:this.defaultAction,this.target="function"==typeof e.target?e.target:this.defaultTarget,this.text="function"==typeof e.text?e.text:this.defaultText},e.prototype.listenClick=function t(e){var n=this;this.listener=d.default(e,"click",function(t){return n.onClick(t)})},e.prototype.onClick=function t(e){this.clipboardAction&&(this.clipboardAction=null),this.clipboardAction=new s.default({action:this.action(e.target),target:this.target(e.target),text:this.text(e.target),trigger:e.target,emitter:this})},e.prototype.defaultAction=function t(e){return a("action",e)},e.prototype.defaultTarget=function t(e){var n=a("target",e);return n?document.querySelector(n):void 0},e.prototype.defaultText=function t(e){return a("text",e)},e.prototype.destroy=function t(){this.listener.destroy(),this.clipboardAction&&(this.clipboardAction.destroy(),this.clipboardAction=null)},e}(l.default);n.default=h,e.exports=n.default},{"./clipboard-action":8,"good-listener":5,"tiny-emitter":7}]},{},[9])(9)});
let clip = new Clipboard('.color-overview li', {
text: trigger => {
return trigger.getAttribute('data-bg-color');
}
});
clip.on('error', e => {
prompt('Copy me!', e.trigger.getAttribute('data-bg-color')) ;
});
clip.on('success', e => {
let trigger = $(e.trigger);
$('.clipboard-info').css('left', trigger.offset().left + (trigger.width() / 2)).css('opacity', 1).delay(800).animate({ opacity:0 }, 200);
});
let palettes = [
{"name":"sandy stone beach ocean diver\n \n ","colors":["E6E2AF","A7A37E","EFECCA","046380","002F2F"]},
{"name":"Firenze\n \n ","colors":["468966","FFF0A5","FFB03B","B64926","8E2800"]},
{"name":"Neutral Blue\n \n ","colors":["FCFFF5","D1DBBD","91AA9D","3E606F","193441"]},
{"name":"Johnny Cash Tribute\n \n ","colors":["73603D","BF8A49","F2CA80","5E5A59","0D0D0D"]},
{"name":"Cherry Cheesecake\n \n ","colors":["B9121B","4C1B1B","F6E497","FCFAE1","BD8D46"]},
{"name":"Flat UI\n \n ","colors":["2C3E50","E74C3C","ECF0F1","3498DB","2980B9"]},
{"name":"1944mustang\n \n ","colors":["000000","263248","7E8AA2","FFFFFF","FF9800"]},
{"name":"Japanese Garden\n \n ","colors":["D8CAA8","5C832F","284907","382513","363942"]},
{"name":"Aspirin C\n \n ","colors":["225378","1695A3","ACF0F2","F3FFE2","EB7F00"]},
{"name":"Phaedra\n \n ","colors":["FF6138","FFFF9D","BEEB9F","79BD8F","00A388"]},
{"name":"Watermelon\n \n ","colors":["7D8A2E","C9D787","FFFFFF","FFC0A9","FF8598"]},
{"name":"Granny Smith Apple\n \n ","colors":["85DB18","CDE855","F5F6D4","A7C520","493F0B"]},
{"name":"Honey Pot\n \n ","colors":["105B63","FFFAD5","FFD34E","DB9E36","BD4932"]},
{"name":"Vitamin C\n \n ","colors":["004358","1F8A70","BEDB39","FFE11A","FD7400"]},
{"name":"Dolores\n \n ","colors":["E8E595","D0A825","40627C","26393D","FFFAE4"]},
{"name":"Orange on olive\n \n ","colors":["B4AF91","787746","40411E","32331D","C03000"]},
{"name":"Orange on gray\n \n ","colors":["FFF8E3","CCCC9F","33332D","9FB4CC","DB4105"]},
{"name":"Circus III\n \n ","colors":["2E0927","D90000","FF2D00","FF8C00","04756F"]},
{"name":"Sea Wolf\n \n ","colors":["DC3522","D9CB9E","374140","2A2C2B","1E1E20"]},
{"name":"Tech Office\n \n ","colors":["595241","B8AE9C","FFFFFF","ACCFCC","8A0917"]},
{"name":"oddend\n \n ","colors":["000000","333333","FF358B","01B0F0","AEEE00"]},
{"name":"28X Dusty Petrol\n \n ","colors":["292929","5B7876","8F9E8B","F2E6B6","412A22"]},
{"name":"Garden swimming pool\n \n ","colors":["96CA2D","B5E655","EDF7F2","4BB5C1","7FC6BC"]},
{"name":"Quiet Cry\n \n ","colors":["1C1D21","31353D","445878","92CDCF","EEEFF7"]},
{"name":"zen and tea\n \n ","colors":["10222B","95AB63","BDD684","E2F0D6","F6FFE0"]},
{"name":"Herbs and Spice\n \n ","colors":["5A1F00","D1570D","FDE792","477725","A9CC66"]},
{"name":"Pistachio\n \n ","colors":["B0CC99","677E52","B7CA79","F6E8B1","89725B"]},
{"name":"Ocean Sunset\n \n ","colors":["405952","9C9B7A","FFD393","FF974F","F54F29"]},
{"name":"Red and smooth\n \n ","colors":["E7E8D1","D3CEAA","FBF7E4","424242","8E001C"]},
{"name":"CS04\n \n ","colors":["F6F792","333745","77C4D3","DAEDE2","EA2E49"]},
{"name":"Salamander\n \n ","colors":["B8ECD7","083643","B1E001","CEF09D","476C5E"]},
{"name":"Vintage Ralph Lauren\n \n ","colors":["703030","2F343B","7E827A","E3CDA4","C77966"]},
{"name":"Pear Lemon Fizz\n \n ","colors":["04BFBF","CAFCD8","F7E967","A9CF54","588F27"]},
{"name":"This Green\n \n ","colors":["00261C","044D29","168039","45BF55","96ED89"]},
{"name":"Friends and foes\n \n ","colors":["2F2933","01A2A6","29D9C2","BDF271","FFFFA6"]},
{"name":"Blue Sky\n \n ","colors":["16193B","35478C","4E7AC7","7FB2F0","ADD5F7"]},
{"name":"Gettysburg\n \n ","colors":["962D3E","343642","979C9C","F2EBC7","348899"]},
{"name":"Bogart\n \n ","colors":["DDDCC5","958976","611427","1D2326","6A6A61"]},
{"name":"Bloggy Gradient Blues\n \n ","colors":["E1E6FA","C4D7ED","ABC8E2","375D81","183152"]},
{"name":"Bordeaux\n \n ","colors":["F7F2B2","ADCF4F","84815B","4A1A2C","8E3557"]},
{"name":"unlike\n \n ","colors":["88A825","35203B","911146","CF4A30","ED8C2B"]},
{"name":"Times Changing\n \n ","colors":["332532","644D52","F77A52","FF974F","A49A87"]},
{"name":"Red Hot\n \n ","colors":["450003","5C0002","94090D","D40D12","FF1D23"]},
{"name":"Salmon on Ice\n \n ","colors":["3E454C","2185C5","7ECEFD","FFF6E5","FF7F66"]},
{"name":"Birdfolio Blues\n \n ","colors":["2B3A42","3F5765","BDD4DE","EFEFEF","FF530D"]},
{"name":"Ventana Azul\n \n ","colors":["F2385A","F5A503","E.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0