一些颜色代码 – 有爱前端

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Color Palatte using SVG for gradient mask</title> <style type="text/css"> html { cursor: url('http://devindavid.com/color/eyedropper.png') 1 54, auto; } svg { top: 0; left: 0; display:block; position: absolute; height: 100%; width: 100%; overflow:hidden; } .container { top: 0; left: 0; display:block; position: absolute; height: 100%; width: 100%; overflow:hidden; } .swatch { text-decoration: none; height: 33.334%; width: 20%; font-family: 'Lato', sans-serif; font-size: 3.5vw; border: none; outline: none; position:relative; float:left; text-align: left; z-index: 25; } .text { position:absolute; bottom:2%; left: 4%; } @media only screen and (max-width: 500px) { .swatch { font-size: 4vh!important; } .text { bottom:0%; left: -3vh; -webkit-transform: rotate(-90deg) translate(60%); -ms-transform: rotate(-90deg) translate(60%); transform: rotate(-90deg) translate(60%); -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; } } </style> </head> <body> <svg version="1.1" id="colorScheme" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 1000 500" preserveAspectRatio="none"> <defs>  <linearGradient id="grad1" x1="35%" y1="55%" x2="20%" y2="10%"> <stop offset="0.1" style="stop-color:rgb(255,255,255);stop-opacity:1" /> <stop offset="1" style="stop-color:rgb(255,255,255);stop-opacity:0.9" /> </linearGradient>  <linearGradient id="grad2" x1="35%" y1="55%" x2="20%" y2="10%"> <stop offset="0.1" style="stop-color:rgb(255,255,255);stop-opacity:1" /> <stop offset="1" style="stop-color:rgb(255,255,255);stop-opacity:0.7" /> </linearGradient>  <linearGradient id="grad3" x1="35%" y1="55%" x2="20%" y2="10%"> <stop offset="0.1" style="stop-color:rgb(255,255,255);stop-opacity:1" /> <stop offset="1" style="stop-color:rgb(255,255,255);stop-opacity:0.50" /> </linearGradient> <mask maskUnits="userSpaceOnUse" id="fadeMask01" x="0%" y="0%" width="20%" height="33.334%" ><rect x="0%" y="0%" width="20%" height="33.334%" style="stroke:none; fill:url(#grad1)"/></mask> <mask maskUnits="userSpaceOnUse" id="fadeMask02" x="20%" y="0%" width="20%" height="33.334%" ><rect x="20%" y="0%" width="20%" height="33.334%" style="stroke:none; fill:url(#grad1)"/></mask> <mask maskUnits="userSpaceOnUse" id="fadeMask03" x="40%" y="0%" width="20%" height="33.334%" ><rect x="40%" y="0%" width="20%" height="33.334%" style="stroke:none; fill:url(#grad2)"/></mask> <mask maskUnits="userSpaceOnUse" id="fadeMask04" x="60%" y="0%" width="20%" height="33.334%" ><rect x="60%" y="0%" width="20%" height="33.334%" style="stroke:none; fill:url(#grad2)"/></mask> <mask maskUnits="userSpaceOnUse" id="fadeMask05" x="80%" y="0%" width="20%" height="33.334%" ><rect x="80%" y="0%" width="20%" height="33.334%" style="stroke:none; fill:url(#grad2)"/></mask> <mask maskUnits="userSpaceOnUse" id="fadeMask06" x="0%" y="33.334%" width="20%" height="33.334%" ><rect x="0%" y="33.334%" width="20%" height="33.334%" style="stroke:none; fill:url(#grad1)"/></mask> <mask maskUnits="userSpaceOnUse" id="fadeMask07" x="20%" y="33.334%" width="20%" height="33.334%" ><rect x="20%" y="33.334%" width="20%" height="33.334%" style="stroke:none; fill:url(#grad2)"/></mask> <mask maskUnits="userSpaceOnUse" id="fadeMask08" x="40%" y="33.334%" width="20%" height="33.334%" ><rect x="40%" y="33.334%" width="20%" height="33.334%" style="stroke:none; fill:url(#grad3)"/></mask> <mask maskUnits="userSpaceOnUse" id="fadeMask09" x="60%" y="33.334%" width="20%" height="33.334%" ><rect x="60%" y="33.334%" width="20%" height="33.334%" style="stroke:none; fill:url(#grad2)"/></mask> <mask maskUnits="userSpaceOnUse" id="fadeMask10" x="80%" y="33.334%" width="20%" height="33.334%" ><rect x="80%" y="33.334%" width="20%" height="33.334%" style="stroke:none; fill:url(#grad2)"/></mask> <mask maskUnits="userSpaceOnUse" id="fadeMask11" x="0%" y="66.66%" width="20%" height="33.334%" ><rect x="0%" y="66.66%" width="20%" height="33.334%" style="stroke:none; fill:url(#grad1)"/></mask> <mask maskUnits="userSpaceOnUse" id="fadeMask12" x="20%" y="66.66%" width="20%" height="33.334%" ><rect x="20%" y="66.66%" width="20%" height="33.334%" style="stroke:none; fill:url(#grad3)"/></mask> <mask maskUnits="userSpaceOnUse" id="fadeMask13" x="40%" y="66.66%" width="20%" height="33.334%" ><rect x="40%" y="66.66%" width="20%" height="33.334%" style="stroke:none; fill:url(#grad3)"/></mask> <mask maskUnits="userSpaceOnUse" id="fadeMask14" x="60%" y="66.66%" width="20%" height="33.334%" ><rect x="60%" y="66.66%" width="20%" height="33.334%" style="stroke:none; fill:url(#grad3)"/></mask> <mask maskUnits="userSpaceOnUse" id="fadeMask15" x="80%" y="66.66%" width="20%" height="33.334%" ><rect x="80%" y="66.66%" width="20%" height="33.334%" style="stroke:none; fill:url(#grad3)"/></mask> </defs>  <rect width="20%" height="33.334%" x="0%" y="0%" style="stroke:#86577C; fill:#86577C; mask:url(#fadeMask01); z-index:15;" /> <rect width="20%" height="33.334%" x="20%" y="0%" style="stroke:#6376A3; fill:#6376A3; mask:url(#fadeMask02); z-index:14;" /> <rect width="20%" height="33.334%" x="40%" y="0%" style="stroke:#FEAE5C; fill:#FEAE5C; mask:url(#fadeMask03); z-index:13;" /> <rect width="20%" height="33.334%" x="60%" y="0%" style="stroke:#7DAFAA; fill:#7DAFAA; mask:url(#fadeMask04); z-index:12;" /> <rect width="20%" height="33.334%" x="80%" y="0%" style="stroke:#E96D64; fill:#E96D64; mask:url(#fadeMask05); z-index:11;" />  <rect width="20%" height="33.334%" x="0%" y="33.334%" style="stroke:#454E69; fill:#454E69; mask:url(#fadeMask06); z-index:10;" /> <rect width="20%" height="33.334%" x="20%" y="33.334%" style="stroke:#B0C2DB; fill:#B0C2DB; mask:url(#fadeMask07); z-index:9;" /> <rect width="20%" height="33.334%" x="40%" y="33.334%" style="stroke:#FFDCAA; fill:#FFDCAA; mask:url(#fadeMask08); z-index:8;" /> <rect width="20%" height="33.334%" x="60%" y="33.334%" style="stroke:#96BEC3; fill:#96BEC3; mask:url(#fadeMask09); z-index:7;" /> <rect width="20%" height="33.334%" x="80%" y="33.334%" style="stroke:#F0B4A3; fill:#F0B4A3; mask:url(#fadeMask10); z-index:6;" />  <rect width="20%" height="33.334%" x="0%" y="66.66%" style="stroke:#494B59; fill:#494B59; mask:url(#fadeMask11); z-index:5;" /> <rect width="20%" height="33.334%" x="20%" y="66.66%" style="stroke:#E3E7ED; fill:#E3E7ED; mask:url(#fadeMask12); z-index:4;" /> <rect width="20%" height="33.334%" x="40%" y="66.66%" style="stroke:#FFF4D5; fill:#FFF4D5; mask:url(#fadeMask13); z-index:3;" /> <rect width="20%" height="33.334%" x="60%" y="66.66%" style="stroke:#C7E1EA; fill:#C7E1EA; mask:url(#fadeMask14); z-index:2;" /> <rect width="20%" height="33.334%" x="80%" y="66.66%" style="stroke:#FAE7E6; fill:#FAE7E6; mask:url(#fadeMask15); z-index:1;" /> </svg>  <div class="container"> <div id="s01" class="swatch" onclick="selectText('s01')"> <span class="text">#86577C</span></div> <div id="s02" class="swatch" onclick="selectText('s02')"> <span class="text">#6376A3</span></div> <div id="s03" class="swatch" onclick="selectText('s03')"> <span class="text">#FEAE5C</span></div> <div id="s04" class="swatch" onclick="selectText('s04')"> <span class="text">#7DAFAA</span></div> <div id="s05" class="swatch" onclick="selectText('s05')"> <span class="text">#E96D64</span></div> <div id="s06" class="swatch" onclick="selectText('s06')"> <span class="text">#454E69</span></div> <div id="s07" class="swatch" onclick="selectText('s07')"> <span class="text">#B0C2DB</span></div> <div id="s08" class="swatch" onclick="selectText('s08')"> <span class="text">#FFDCAA</span></div> <div id="s09" class="swatch" onclick="selectText('s09')"> <span class="text">#96BEC3</span></div> <div id="s10" class="swatch" onclick="selectText('s10')"> <span class="text">#F0B4A3</span></div> <div id="s11" class="swatch" onclick="selectText('s11')"> <span class="text">#494B59</span></div> <div id="s12" class="swatch" onclick="selectText('s12')"> <span class="text">#E3E7ED</span></div> <div id="s13" class="swatch" onclick="selectText('s13')"> <span class="text">#FFF4D5</span></div> <div id="s14" class="swatch" onclick="selectText('s14')"> <span class="text">#C7E1EA</span></div> <div id="s15" class="swatch" onclick="selectText('s15')"> <span class="text">#FAE7E6</span></div> </div> <script type="text/javascript"> if (window.getSelection) { if (window.getSelection().empty) { function selectText(containerid) { if (document.selection) { var range = document.body.createTextRange(); range.moveToElementText(document.getElementById(containerid)); range.select(); } else if (window.getSelection) { var range = document.createRange(); range.selectNode(document.getElementById(containerid)); window.getSelection().addRange(range); } }; } else if (this.getSelection().toString()==true) { this.onClick( window.getSelection().removeAllRanges() ) } }; function selectText(containerid) { if (document.selection) { var range = document.body.createTextRange(); range.moveToElementText(document.getElementById(containerid)); range.select(); } else if (window.getSelection) { var range = document.createRange(); range.selectNode(document.getElementById(containerid)); window.getSelection().addRange(range); } }; </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 一些颜色代码