vue实现一个拾色器效果代码
代码语言:html
所属分类:选择器
代码描述:vue实现一个拾色器效果代码,支持滚轮换色及复制粘贴
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css"> <style> @import url("https://fonts.googleapis.com/css?family=Space+Mono"); body, html { position: fixed; top: 0; left: 0; right: 0; bottom: 0; } input { background-color: transparent; } input[type=range] { -webkit-appearance: none; -moz-appearance: none; appearance: none; } input[type=range] { margin: 0; width: 20vmin; } input[type=range]:focus { outline: none; } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 1.4vmin; cursor: pointer; animate: 0.2s; background: transparent; color: transparent; border-radius: 0; border: solid var(--colorInner); border-width: 0 0 1px; } input[type=range]::-webkit-slider-thumb { position: relative; z-index: 1; font-size: 1.9vmin; border-radius: 50%; border-bottom-left-radius: 0; width: 1em; height: 1em; background-color: var(--colorInner); box-shadow: 0 0 0 0.1em var(--colorUI); -webkit-transition: 200ms box-shadow linear; transition: 200ms box-shadow linear; cursor: pointer; -webkit-appearance: none; transform: translateY(-0.8em) rotate(-45deg); } input[type=range]::-moz-range-track { width: 100%; height: 1.4vmin; cursor: pointer; animate: 0.2s; background: transparent; color: transparent; border-radius: 0; border: solid var(--colorInner); border-width: 0 0 1px; } input[type=range]::-moz-range-thumb { position: relative; z-index: 1; font-size: 1.9vmin; border-radius: 50%; border-bottom-left-radius: 0; width: 1em; height: 1em; background-color: var(--colorInner); box-shadow: 0 0 0 0.1em var(--colorUI); -moz-transition: 200ms box-shadow linear; transition: 200ms box-shadow linear; cursor: pointer; -webkit-appearance: none; transform: translateY(-0.8em) rotate(-45deg); } input[type=range]::-ms-track { width: 100%; height: 1.4vmin; cursor: pointer; animate: 0.2s; background: transparent; color: transparent; border-radius: 0; border: solid var(--colorInner); border-width: 0 0 1px; } input[type=range]::-ms-fill-lower { background: var(--colorUI); -ms-transition: 200ms background-color linear; transition: 200ms background-color linear; border: none; border-radius: 100%; } input[type=range]::-ms-fill-upper { background: var(--colorUI); -ms-transition: 200ms background-color linear; transition: 200ms background-color linear; border-radius: 100%; box-shadow: none; } input[type=range]::-ms-thumb { position: relative; z-index: 1; font-size: 1.9vmin; border-radius: 50%; border-bottom-left-radius: 0; width: 1em; height: 1em; background-color: var(--colorInner); box-shadow: 0 0 0 0.1em var(--colorUI); -ms-transition: 200ms box-shadow linear; transition: 200ms box-shadow linear; cursor: pointer; -webkit-appearance: none; transform: translateY(-0.8em) rotate(-45deg); } body, button, input { font-family: "Space Mono", monospace; } :root { --colorUI: #212121; } .gradient { position: absolute; width: 100%; height: 100%; top: 0; left: 0; box-shadow: inset 0 0 0 1.6vmin var(--colorUI); transition: 200ms box-shadow linear; } .gradient__text, .gradient::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .gradient::before { background: var(--colorUI); transition: 200ms background-color linear; width: 54.9vmin; height: 54.9vmin; border-radius: 50%; box-shadow: 0 0 10rem currentColor; } .gradient__text { line-height: 1.6; text-align: center; width: 20vmin; font-size: 1.9vmin; color: var(--colorInner); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin-top: 8vmin; } .gradient__text strong { display: block; margin-bottom: 0.5em; } .gradient__text.pouf-enter-active, .gradient__text.pouf-leave-active { opacity: 1; transition: opacity 0.3s linear, transform 0.4s cubic-bezier(0.7, 0.3, 0, 1); } .gradient__text.pouf-enter, .gradient__text.pouf-leave-to { opacity: 0; transform: translate(-50%, -75%); transform-origin: 50% 0%; } .picker { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; } .picker .ellipse { opacity: 0; } .picker__svg { stroke-width: 15; overflow: auto; width: 100%; height: 100%; transform: scale(0.925); } .picker--inner { transform: translate(-50%, -50%) scale(0.87); } .picker--inner .ellipse { transform: translate(2px, 2px) scale(0.98); } .controls, .pointer, .pointer__marker { pointer-events: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 57vmin; height: 57vmin; } .pointer { cursor: move; width: 100%; height: 100%; } .pointer__marker { width: 51.6vmin; height: 51.6vmin; } .pointer__marker::before, .pointer__marker::after { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); } .pointer__marker::before { height: 5vmin; width: 0.1rem; background: var(--colorUI); transition: 200ms background-color linear; } .pointer__marker::after { background: currentColor; border-radius: 50%; transform: translateX(-50%) rotate(-45deg); border-bottom-left-radius: 0; font-size: 1.9vmin; margin-top: -0.5em; width: 1em; height: 1em; box-shadow: 0 0 0 0.1rem var(--colorUI); transition: 200ms box-shadow linear; } .pointer--lower .pointer__marker { margin-top: -0.7rem; } .pointer--lower .pointer__marker::before { box-shadow: 0 0 0 0.6rem var(--colorUI); transition: 200ms box-shadow linear; width: 0.7rem; border-radius: 100%; } .pointer--lower .pointer__marker::after { display: none; } .title { position: absolute; top: 50%; left: 0; right: 0; text-align: center; font-size: 0.8em; margin-top: -6vmin; } .ratio { z-index: 2; position: absolute; pointer-events: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; text-shadow: 0 0 0.5em var(--colorUI); transition: 200ms text-shadow linear; } .ratio__label { display: none; font-size: 0.7rem; text-align: center; margin-bottom: 0.5em; } .gradientval { display: none; } .actions { display: flex; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-top: 14.5vmin; will-change: transform; } .actions--up .actions__button { transform: translateY(-8vmin); transition: 340ms transform cubic-bezier(0.8, 0.3, 0.5, 1.2); } .actions--up .actions__button:nth-child(1) { transition-delay: 100ms; transform: translate(-3.5vmin, -8vmin); } .actions--up .actions__button:nth-child(2) { transition-delay: 170ms; } .actions--up .actions__button:nth-child(3) { transition-delay: 240ms; transform: translate(3.5vmin, -8vmin); } .actions--up .actions__button:nth-child(4) { transition-delay: 250ms; } .button { position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: var(--colorInner); background: transparent; border: none; cursor: pointer; display: inline-block; margin-right: -4px; font-size: 2.4vmin; outline: none; padding: 0.1em 0.3em; } .button:hover svg { transform: scale(1); } .button:hover .button__text { opacity: 1; transform: translateX(50%); } .button__icon { display: block; font-style: normal; width: 2.4vmin; height: 2.4vmin; } .button__text { opacity: 0; pointer-events: none; position: absolute; top: 110%; right: 50%; transform: translateX(50%) translateY(-50%); font-size: 0.6em; line-height: 1.3; padding: 0.2em 0.4em; transition: transform 200ms, opacity 100ms; transition-delay: 100ms, 100ms; } .button svg { width: 2.4vmin; transition: 100ms transform ease-out; transform: scale(0.8); } .button svg path { fill: currentColor; } .button--play svg { width: 1.05vmin; } .app--uianimate .controls { transition: 444ms transform ease-in-out 200ms; will-change: transform; } .app--uianimate .gradient::before { transition: 444ms transform ease-in-out 100ms; will-change: transform; } .app--uihide .controls { transform: translate(-50%, -50%) scale(0); } .app--uihide .gradient::before { transform: translate(-50%, -50%) scale(0); } </style> </head> <body> <!-- partial:index.partial.html --> <script type="text/x-template" id="picker"> <div> <svg v-bind:style="{ transform: 'rotate(' + (shift * -360 % 360) + 'deg)' }"class="picker__svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="-10 -10 220 220"> <defs> <linearGradient v-bind:id="'redyel-' + id" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1"> <stop offset="0%" v-bind:stop-color="colors[0]"/> <stop offset="100%" v-bind:stop-color="colors[1]"/> </linearGradient> <linearGradient v-bind:id="'yelgre-' + id" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1"> <stop offset="0%" v-bind:stop-color="colors[1]"/> <stop offset="100%" v-bind:stop-color="colors[2]"/> </linearGradient> <linearGradient v-bind:id="'grecya-' + id" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1"> <stop offset="0%" v-bind:stop-color="colors[2]"/> <stop offset="100%" v-bind:stop-color="colors[3]"/> </linearGradient> <linearGradient v-bind:id="'cyablu-' + id" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0"> <stop offset="0%" v-bind:stop-color="colors[3]"/> <stop offset="100%" v-bind:stop-color="colors[4]"/> </linearGradient> <linearGradient v-bind:id="'blumag-' + id" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0"> <stop offset="0%" v-bind:stop-color="colors[4]"/> <stop offset="100%" v-bind:stop-color="colors[5]"/> </linearGradient> <linearGradient v-bind:id="'magred-' + id" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0"> <stop offset="0%" v-bind:stop-color="colors[5]"/> <stop offset="100%" v-bind:stop-color="colors[0]"/> </linearGradient> </defs> <ellipse class="ellipse" cx="100" cy="100" rx="100.95" ry="100.95" fill="none" stroke="#212121"/> <g fill="none" transform="translate(100,100)"> <path d="M -1,-100 A 100,100 0 0,1 86.6,-50" v-bind:stroke="'url(#redyel-' + id + ')'"/> <path d="M 86,-51 A 100,100 0 0,1 86.6,50" v-bind:stroke="'url(#yelgre-' + id + ')'"/> <path d="M 87,49 A 100,100 0 0,1 0,100" v-bind:stroke="'url(#grecya-' + id + ')'"/> <path d=".........完整代码请登录后点击上方下载按钮下载查看
网友评论0