https://codepen.io/onlyveen/pen/rwvKqb <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>调色板</title> <!-- <link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet"> --> <style type="text/css"> #body { padding: 50px; background: #212121; min-height: 100vh; font-family: 'Josefin Sans', sans-serif; text-transform: uppercase; letter-spacing: 2px; } #body .out-wrap { position: relative; width: 95%; margin: 0 auto; } #body .out-wrap > h1 { color: #fff; text-align: center; margin: 0 0 20px; } #body .out-wrap .tab-container > ul#tabs { padding: 0 15px; list-style-type: none; position: relative; border-bottom: none; z-index: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; widtyh: 100%; margin-bottom: 0; } #body .out-wrap .tab-container > ul#tabs li { flex: 1; position: relative; z-index: 0; padding: 30px 0; box-shadow: 8px 12px 25px 2px rgba(0, 0, 0, 0.4); cursor: pointer; transition: all 0.2s ease; transform: translateY(20px); } #body .out-wrap .tab-container > ul#tabs li:hover { transform: translateY(15px); } #body .out-wrap .tab-container > ul#tabs li:nth-child(1) { border-radius: 20px 0 0 0; } #body .out-wrap .tab-container > ul#tabs li:last-child { box-shadow: none; border-radius: 0 20px 0 0; } #body .out-wrap .tab-container > ul#tabs li.active { margin: 0; z-index: 20 !important; border-radius: 10px 10px 0 0; transform: translateY(0); } #body .out-wrap .tab-container .tab-panes { box-shadow: 0 6px 10px -2px rgba(0, 0, 0, 0.25); padding: 30px; background: #fff; position: relative; } #body .out-wrap .tab-container .tab-panes > div { display: none; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; @incldue justify-content (space-between); display: none; } #body .out-wrap .tab-container .tab-panes > div:before { content: attr(id); width: 100%; text-align: center; font-size: 40px; } #body .out-wrap .tab-container .tab-panes > div.showit { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } #body .out-wrap .tab-container .tab-panes > div > div { width: 20%; height: 100px; display: none; } #body .out-wrap .tab-container .tab-panes > div > div[style*="background"] { display: flex !important; justify-content: center; align-items: center; } #body .out-wrap .tab-container .tab-panes > div > div[style*="background"] p { color: #fff; font-size: 16px; margin: 0; } </style> </head> <body> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://use.fontawesome.com/aa95071b26.js"></script> <div id="body"> <div class="out-wrap"> <h1>Color Palette</h1> <div class="tab-container"> <ul id="tabs"> <li class="active" title="reds" vc-code="#f44336"></li> <li title="pinks" vc-code="#e91e63"></li> <li title="purples" vc-code="#9c27b0"></li> <li title="deep-purples" vc-code="#673ab7"></li> <li title="indigos" vc-code="#3f51b5"></li> <li title="blues" vc-code="#2196f3"></li> <li title="light-blues" vc-code="#03a9f4"></li> <li title="cyans" vc-code="#00bcd5 "></li> <li title="teals" vc-code="#009688"></li> <li title="greens" vc-code="#4caf50 "></li> <li title="light-greens" vc-code="#8bc34a "></li> <li title="limes" vc-code="#cddc39"></li> <li title="yellows" vc-code="#ffeb3b "></li> <li title="ambers" vc-code="#ff9800"></li> <li title="deep-oranges" vc-code="#ff5722"></li> <li title="browns" vc-code="#795548"></li> <li title="greys" vc-code="#9e9e9e"></li> <li title="blue-greys" vc-code="#607d8b"></li> </ul> <div class="tab-panes"> <div id="reds" class="showit"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div class="main"></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div id="pinks"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div class="main"></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div id="purples"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div class="main"></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div id="deep-purples"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div class="main"></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div id="indigos"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div class="main"></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div id="blues"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div class="main"></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div id="light-blues"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div class="main"></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div id="cyans"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div class="main"></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div id="teals"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div class="main"></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div id="greens"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div class="main"></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div id="light-greens"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div class="main"></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div id="limes"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div class="main"></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div id="yellows"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div class="main"></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div id="ambers"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div class="main"></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div id="deep-oranges"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div class="main"></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div id="browns"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div class="main"></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div id="greys"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div class="main"></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div id="blue-greys"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div class="main"></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </div> </div> </div> </body> <script type="text/javascript"> $(function() { $('#tabs > li').each(function() { var z_index = $(this).length - $(this).index(); $(this).css({ 'background': $(this).attr('vc-code'), 'z-index': z_index + 1 }); var c_color = $(this).attr('vc-code'); $('div:nth-child(' + ($(this).index() + 1) + ') > .main').css('background', c_color); }); $('#tabs > li').click(function() { $(this).addClass('active').siblings().removeClass('active'); $('.tab-panes > div#' + $(this).attr('title')).addClass('showit').siblings().removeClass('showit'); }); $('.tab-panes > div > div:not(.main)').each(function(){ var shadelev = ($(this).siblings('.main').index() - $(this).index()) * 5; var shade = $(this).siblings('.main').css('background'); shade = rgb2hex(shade); var newshade = LightenDarkenColor(shade, shadelev); $(this).css('background', newshade); }); $('.tab-panes > div > div').each(function() { var code = $(this).css('background'); code = rgb2hex(code); $(this).append('<p>' + code + '</p>'); }); }); function rgb2hex(rgb) { rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i); return (rgb && rgb.length === 4) ? "#" + ("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) + ("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) + ("0" + parseInt(rgb[3], 10).toString(16)).slice(-2) : ''; } function LightenDarkenColor(col, amt) { var usePound = false; if (col[0] == "#") { col = col.slice(1); usePound = true; } var num = parseInt(col, 16); var r = (num >> 16) + amt; if (r > 255) r = 255; else if (r < 0) r = 0; var b = ((num >> 8) & 0x00FF) + amt; if (b > 255) b = 255; else if (b < 0) b = 0; var g = (num & 0x0000FF) + amt; if (g > 255) g = 255; else if (g < 0) g = 0; return (usePound ? "#" : "") + String("000000" + (g | (b << 8) | (r << 16)).toString(16)).slice(-6); } </script> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 调色板 喜欢 (1)or分享 (0)
