angular+underscore+hammer实现太阳花取色器酷炫效果代码
代码语言:html
所属分类:选择器
代码描述:angular+underscore+hammer实现太阳花取色器酷炫效果代码,点击色卡进行选择。
代码标签: angular underscore hammer 太阳花 取色器
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> @charset "UTF-8"; *, *::before, *::after { box-sizing: border-box; } [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } [tap] { cursor: pointer; } .fg-light { color: #FFF; } .fg-dark { color: #363639; } .canvas { overflow: hidden; position: relative; display: flex; flex-direction: row; justify-content: center; align-items: center; z-index: 1; flex: 4; font-size: 1.3vmin; transition: 1.5s ease-in-out; cursor: default; } .dial { position: absolute; top: 0; right: 0; bottom: 0; left: 0; flex: none; background-image: radial-gradient(circle at 50% 50%, #fff, #000); mix-blend-mode: overlay; } .color-display { display: flex; flex-direction: column; align-items: center; position: relative; font-size: 1.35em; } .color-display a { text-decoration: none; color: inherit; } .color-brick { border-radius: 50%; flex: 0 0 auto; padding: 0; width: 100%; height: 100%; pointer-events: auto; box-shadow: 1.5em 0 2.5em -2em rgba(0, 0, 0, 0.65); } .color-brick.current::after { content: ""; font-family: FontAwesome; font-size: 4.5vmin; position: absolute; top: 1em; left: 50%; transform: translateX(-50%); } .color-ring-outer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) translateZ(0); } .color-ring { position: relative; width: 35em; height: 35em; pointer-events: none; border-radius: 100%; overflow: visible; transform-origin: 50% 50%; line-height: 0; transition: transform 0.3s ease-out; } .color-ring > div { display: flex; align-items: flex-start; justify-content: space-around; position: absolute; top: -12vmin; right: 50%; bottom: 50%; left: 50%; transform-origin: center bottom; transform: rotate(180deg); transition: transform 0.3s ease-out, top 0.3s ease-out; } .color-ring > div:nth-last-child(-n+2) { transition: none; } .color-ring > div:last-child { transform-origin: right bottom; } .color-ring > div:last-child .color-brick { pointer-events: none; border-radius: 0 100% 10%/20% 55%; box-shadow: 0.7em 1em 1.5em -1em rgba(0, 0, 0, 0.65); } .color-ring > div:last-child .color-brick::after { left: 0; } .color-info { position: relative; width: 13em; height: 13em; text-align: center; font-size: 2.1em; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: background 0.3s ease-out; box-shadow: 0 0.5em 4em -1em rgba(0, 0, 0, 0.9); border-radius: 100%; } .color-info > * + * { margin: 0; } html, body { margin: 0; height: 100%; display: flex; flex: 1; font-family: "DIN Alternate", monospace; } .panel { position: relative; flex: 1; padding: 0.5em; line-height: 1; background: #FFF; color: #363639; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 1.5em; box-shadow: 0 0 2em -1em #363639; -webkit-user-select:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0