jquery实现rgb三原色拖动改变值生成新的颜色效果代码
代码语言:html
所属分类:拖放
代码描述:jquery实现rgb三原色拖动改变值生成新的颜色效果代码,点击拖动rgb三色的值进行调整会生成新的rgb颜色。
代码标签: jquery rgb 三原色 拖动 改变 值 生成 新 颜色
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"); html, body { height: 100%; cursor: default; } body { background-color: black; color: white; font-family: "Poppins", sans-serif; font-size: 10px; line-height: 12px; } #container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; } #picker { display: flex; justify-content: center; align-items: center; width: 100px; height: 100px; position: relative; } #picker p { position: absolute; margin: 0; transition: opacity 0.2s ease-in-out; } #picker p#color { bottom: 0px; } #picker p#title { top: 0px; } #picker #copy { background: transparent; position: absolute; width: 25px; height: 25px; border-radius: 50%; } .circle { position: absolute; width: 40px; height: 40px; background: white; border-radius: 50%; mix-blend-mode: screen; transition: transform 0.2s ease-in-out, width 0.2s ease-in-out, height 0.2s ease-in-out, border 0.2s ease-in-out; display: flex; justify-content: center; align-items: center; border: white 1px solid; } #c1 { background: red; background: red; border-color: red; } #c2 { background: lime; background: lime; border-color: lime; } #c3 { background: blue; background: blue; border-color: blue; } #picker.open .circle { width: 100px; height: 100px; } #picker.open p { opacity: 0; } #picker.open #c1 { transform: translate(0px, -40px); border-color: rgba(255, 0, 0, 0.5); } #picker.open #c2 { transform: translate(-34px, 20px); border-color: rgba(0, 255, 0, 0.5); } #picker.open #c3 { transform: translate(34px, 20px); border-color: rgba(0, 0, 255, 0.7); } .inst { position: absolute; bottom: 10px; color: #aaa; left: 50%; transform: translateX(-50%); pointer-events: none; transition: opacity 1s ease-in-out; } .inst.top { top: 10px; } .inst.top.hidden { opacity: 0; } * { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */ } </style> </head> <body > <div id="container"> <div id="picker" class="open"> <!--<p id="title">RGB PICKER</p>--> <p id="color">255 255 255</p> <div class="circle" id="c1" data-col="255"></div> <div class="circle" id="c2" data-col="255"></div> <div class="circle" id="c3" data-col="255"></div> <div id="copy"></div> </div> </div> <p class="ins.........完整代码请登录后点击上方下载按钮下载查看
网友评论0