页面选择颜色提取器

<!doctype html>
<html >
<head>
<meta charset="utf-8">
<title>颜色选取器</title>

<style>


 body{
  box-sizing: border-box;
  height: 100px;
   margin: 0;
    padding: 0;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    -webkit-animation-duration: 0ms !important;
            animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}

body {
  height: 0;
}


html {
  background-color: #00000;
  
  font-weight: 100;
  font-size: 16px;
}

.container {
     padding: 0;
  width: 80%; 条宽占页面宽度
  height:0;
}

}

.color-palette-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  display: flex;
  flex-direction: column;
  padding: 1em;
}
.color-palette-wrapper.js-active {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.color-palette__item {
  position: relative;
  display: flex; ,两列字排列方式,图形显示方式
  align-items: center;
  justify-content: space-between;
  flex-grow: 1EM;
  margin: 1% 1%; 行间距
  padding: 1% 5%; 线条高度,字体离两边距离
  border-radius: 1em; 四角圆角控制
  font-family: "Roboto Mono", monospace; 字体
  transition: -webkit-transform 250ms;
  transition: transform 250ms;
  transition: transform 250ms, -webkit-transform 250ms;
  cursor: pointer;
}

.copied-indicator {
  position: absolute;
  top: 50%; 复制完成后OK字样上边距
  left: 50%;复制完成后OK字样左边距
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  opacity: 0;
  transition: all 250ms;
}
.copied-indicator.js-copied {
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 0.75;
}
</style>

</head>
<body>

<script src="js/knockout-min.js"></script>
<script src="js/clipboard.min.js"></script>

<div class="container">
    <div class="material-color-picker">
        
        <div class="material-color-picker__right-panel" data-bind="foreach: materialColors">
            <div class="color-palette-wrapper" data-bind="css: { 'js-active': selectedColor() === color }">
                
                <ol class="color-palette" data-bind="foreach: variations">
                    <li id="clipboardItem" class="color-palette__item" data-bind="attr: { 'data-clipboard-text': hex }, style: { 'background-color': hex }">
                        <span data-bind="text: weight"></span>
                        <span data-bind="text: hex"></span>
                        <span class="copied-indicator" data-bind="css: { 'js-copied': copiedHex() === hex }">OK!</span>
                    </li>
                    
                </ol>
            </div>
        </div>
    </div>
</div>

<script>
var copiedHex = ko.observable();
var clipboard = new Clipboard('#clipboardItem');

clipboard.on('success', function(el) {
    console.clear();
    console.info('Action:', el.action);
    console.info('Text:', el.text);
    console.info('Trigger:', el.trigger);
    el.clearSelection();
    
    copiedHex(el.text);
});

///

var selectedColor = ko.observable("本牛专属色"); // lazy

ko.applyBindings({
    materialColors: [
        {
            color: "本牛专属色",
            variations: [
                {
                    weight: "主色调",
                    hex: "#005299"
                },
                {
                    weight: "配色",
                    hex: "#f5ab4c"
                },
                {
                    weight: "数据规范区",
                    hex: "#e4f7d7"
                },
                {
                    weight: "浅灰",
                    hex: "#f2f2f2"
                },
                {
                    weight: "深灰",
                    hex: "#808080"
                },
                {
                    weight: "黑色",
                    hex: "#242424"
                },
                {
                    weight: "提示-允许",
                    hex: "#32bf71"
                },
                {
                    weight: "提示-警告",
                    hex: "#ff4c4c"
                },
                {
                    weight: "警示色",
                    hex: "#f9eda6"
                },
                
                {
                    weight: "白色",
                    hex: "#FFFFFF"
              }
            ]
        }
    ]
});
</script>

</body>
</html>
「如果文章对您有用,欢迎点赞分享。」
© 版权声明
THE END
喜欢就支持一下吧
点赞10 分享
评论 抢沙发

请登录后发表评论

    请登录后查看评论内容