js实现一个颜色可视化rgb配色效果代码
代码语言:html
所属分类:其他
代码描述:js实现一个颜色可视化rgb配色效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Inter&display=swap"); * { box-sizing: border-box; } .app { height: 100vh; display: flex; overflow: hidden; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 0 10px; margin: 0 auto; } .app * { font-family: "Inter", sans-serif; } .app-header { display: flex; width: 100%; max-width: 400px; border-radius: 40px; align-items: center; border: 2px solid #dfdfe0; position: relative; z-index: 1; background-color: #fff; overflow: hidden; } .app-header:focus-within { border-color: #d7d7db; } .app-input { width: calc(100% - 100px); height: 64px; border: 0; padding: 0 20px; background-color: transparent; outline: 0; } .app-hex { width: 110px; height: 110px; border-radius: 50%; display: flex; justify-content: flex-end; margin-right: 40px; top: 4px; position: relative; } .app-hex:after { content: ""; height: calc(100% + 16px); width: 1px; position: relative; top: -8px; left: 25px; background-color: #eaeaea; } .app-hex:before { content: "HEX"; position: absolute; top: calc(100% + 10px); width: 100%; text-align: center; left: 0; font-size: 12px; } .app-button { height: 42px; flex-shrink: 0; margin-right: 12px; border: 0; border-radius: 40px; color: #fff; cursor: pointer; outline: 0; width: 100px; text-align: center; background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%); } .app-body { position: relative; max-width: 800px; width: 100%; margin-top: 0; transition: 0.5s; height: 0; display: flex; align-items: center; opacity: 0; justify-content: center; } .app-rgb { position: relative; width: 140px; height: 160px; } .app-rgb-code { width: 140px; height: 140px; border-radius: 50%; position: absolute; top: 0; left: calc(50% - 70px); mix-blend-mode: difference; transition: transform 0.4s 0.1s; } .app-rgb-code:nth-child(1) { z-index: 1; } .app-rgb-code:nth-child(2) { transform: translate(-100px, 0); } .app-rgb-code:nth-child(3) { transform: translate(100px, 0); } .app.is-active .app-body { opacity: 1; height: 200px; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0