vue-color实现5点渐变色背景代码可视化设置效果代码
代码语言:html
所属分类:其他
代码描述:vue-color实现5点渐变色背景代码可视化设置效果代码,可设置上下左右四点击中间点的颜色值,产生新的渐变背景,进而导出为css渐变代码。
代码标签: vue color 渐变色 背景 代码 可视化 设置
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.6.1.css"> <style> @import url("https://fonts.googleapis.com/css?family=Roboto:100,400,700"); *,*:after { box-sizing:border-box; font-family:"Roboto",sans-serif; } html,body { width:100%; height:100%; margin:0; padding:0; overflow:hidden; } #gradient-map,.input-holder,.close-handler { width:100%; height:100%; float:left; position:absolute; top:0; left:0; } #gradient-map { background:#fff; display:flex; justify-content:center; align-items:center; } #gradient-map .display-gradient { padding:25px 25px; border-radius:15px; background:rgba(0,0,0,0.2); transition:all 0.5s ease; -webkit-transition:all 0.5s ease; -webkit-box-shadow:0px 0px 28px 1px rgba(0,0,0,0.34); -moz-box-shadow:0px 0px 28px 1px rgba(0,0,0,0.34); box-shadow:0px 0px 28px 1px rgba(0,0,0,0.34); } #gradient-map .display-gradient:hover { -webkit-box-shadow:0px 0px 12px 1px rgba(0,0,0,0.34); -moz-box-shadow:0px 0px 12px 1px rgba(0,0,0,0.34); box-shadow:0px 0px 12px 1px rgba(0,0,0,0.34); } #gradient-map .display-gradient p { padding:0px; margin:0px; color:#fff; font-size:10pt; text-align:center; } .picker { position:absolute; padding:0px; top:50px; z-index:100; padding:2px; left:50px; } .picker .vue-color__chrome { position:fixed; top:calc(50% - 112px); left:calc(50% - 120px); } .picker:after { content:""; position:absolute; left:0; top:0; z-index:-1; height:30px; width:30px; background:#fff; border-radius:500px; transition:all 0.2s ease; -webkit-transition:all 0.2s ease; -webkit-box-shadow:0px 0px 8px 1px rgba(0,0,0,0.34); -moz-box-shadow:0px 0px 8px 1px rgba(0,0,0,0.34); box-shadow:0px 0px 8px 1px rgba(0,0,0,0.34); } .picker:hover:after { -webkit-box-shadow:0px 0px 2px 1px rgba(0,0,0,0.34); -moz-box-shadow:0px 0px 2px 1px rgba(0,0,0,0.34); box-shadow:0px 0px 2px 1px rgba(0,0,0,0.34); } .picker button { border:0px; width:26px; border-radius:500px; outline:none !important; height:26px; cursor:pointer; position:relative; } #picker-1 { left:25%; top:25%; } .get-code { position:fixed; width:420px; left:calc(50% - 210px); } .get-code textarea { background:rgba(0,0,0,0.3); color:#fff; padding:10px 10px 0px 10px; width:100%; height:148px; overflow:hidden; outline:none; border:0px; resize:none; border-radius:10px; font-size:9pt; line-height:14pt; font-weight:100; border:2px solid rgba(0,0,0,0); cursor:pointer; transition:all 0.5s ease; -webkit-transition:all 0.5s ease; -webkit-box-shadow:0px 0px 28px 1px rgba(0,0,0,0.34); -moz-box-shadow:0px 0px 28px 1px rgba(0,0,0,0.34); box-shadow:0px 0px 28px 1px rgba(0,0,0,0.34); } .get-code textarea:focus { border:2px solid #fff; } .get-code textarea:hover { -webkit-box-shadow:0px 0px 12px 1px rgba(0,0,0,0.34); -moz-box-shadow:0px 0px 12px 1px rgba(0,0,0,0.34); box-shadow:0px 0px 12px 1px rgba(0,0,0,0.34); } .get-code span { width:100%; position:absolute; bottom:calc(100% + 10px); text-align:center; left:0; color:rgba(0,0,0,0.7); user-select:none; -moz-user-select:none; -khtml-user-select:none; -webkit-user-select:none; -o-user-select:none; } .code-toggle { z-index:1000000; color:#1a1a1a; position:absolute; top:10px; cursor:pointer; text-align:center; font-size:8pt; padding:10px; width:200px; left:calc(50% - 100px); line-height:18pt; font-weight:700; opacity:0.5; transition:all 0.3s ease; -webkit-transition:all 0.3s ease; user-select:none; -moz-user-select:none; -khtml-user-select:none; -webkit-user-select:none; -o-user-select:none; } .code-toggle i { font-size:25pt; } .code-toggle:hover { opacity:1; } </style> </head> <body> <div id="gradient-map"> <div class="input-holder"> <div class="close-handler" @click="closeBoxes" @mousemove="doDrag"></div> <div class="picker" v-bind:id="'picker-'+col.key" v-for="col in colors"><button class="picker-button" @click="toggle(col.key)" v-bind:style="{background: colors[col.key].colorInfo.hex, opacity:colors[col.key].colorInfo.rgba.a}" @mousedown="setDrag(col.key)" @mouseup="removeDrag(col.key)"></button> <chrome-picker v-if="colors[col.key].isOpen" v-model="colors[col.key].colorInfo"></chrome-picker> </div> </div> <div class="display-gradient" v-show="hasUsed"> <p>点击5个位置圆点选择颜色 :)</p> </div> <div class="get-code" v-show="showCode" @click="copyToClip"><textarea type="text" v-model="gradText" spellcheck="false" id="gradCode"></textarea><span class="copyMessage" v-show="showCopied">已复制剪贴板!</span></div><a class="code-toggle" @click="toggleCode"><i class="fas fa-code"></i><br>{{togMessage}}</a></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwr.........完整代码请登录后点击上方下载按钮下载查看
网友评论0