VueJS十六进制颜色值所组成的旋转密码锁动画

Vue.js + ntc.js Visual Hexadecimal Color, 很有创意的一个作品！

vue, color

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 4133
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

const _digits = '0123456789abcdef'.split('')

Vue.component('hex-channel', {
    template: `
    <div class="channel" :class="{moving: moving}">
      <div class="digits"
        @mousedown="start" 
        @mousemove="move"
        @mouseup="stop"
        @touchstart="start" 
        @touchmove="move" 
        @touchend="stop"
        >
        <div class="digit" :class="{current: digit == hexy}" v-for="digit in digits"><span>{{digit}}</span></div>
      </div>
    </div>
  `,
    props: [
        'channel',
        'index'
    ],
    data: function() {
        return {
            moving: false,
            y: 0,
            hexy: 0
        }
    },
    created: function() {
        this.digits = '0123456789abcdef'.split('')
        window.addEventListener('resize', this.sameAsMove);
    },
    destroyed: function() {
        window.removeEventListener('resize', this.sameAsMove);
    },
    mounted: function() {
        this.sameAsMove()
    },
    watch: {
        channel: 'sameAsMove'
    },
    methods: {
        sameAsMove: function() {
            this.y = parseInt(this.channel, 16)
            this.getHeight()
            this.processly(this.y * -this.height)
        },
        getHeight: function() {
            this.height = this.$el.getBoundingClientRect().height
        },
        getPointerly: function(e) {
            return e.touches && e.touches.length ? e.touches[0].clientY : e.clientY
        },
        processly: function(value) {
            if (isNaN(value)) {
                value = 0
            }
            let stack = (this.height * (this.digits.length - 1) * -1)
            this.y = value > 0 ? 0 : value < stack ? stack : value
            this.hexy = parseInt(Math.abs(Math.round(this.y / this.height))).toString(16)
            this.$el.style.setProperty('--y', this.y + 'px')
            this.$emit('colorize', this.index, this.hexy)
        },
        start: function(e) {
            this.moving = true
            this.dirty = true
            this.getHeight()
            this.pointerly = this.getPointerly(e) - this.y
        },
        move: function(e) {
            if (this.moving) {
                this.processly(Math.round(this.getPointerly(e) - this.pointerly))
            }
        },
        stop: function(e) {
            this.moving = false
            this.processly(Math.round((this.getPointerly(e) - this.pointerly) / this.height) * this.height)
        }
    }
})

let vm = new Vue({
    el: 'main',
    data: {
        digits: _digits,
        channels: 6,
        color: '',
        colorName: ''
    },
    computed: {},
    mounted: function() {
        this.randomColor()
    },
    methods: {
        setColor: function(color) {
            this.colorName = ntc.name(color)[1]
            document.documentElement.style.setProperty('--color', color)
        },
        updateColorChannel: function(index, digit) {
            let mutateColor = this.color.split('')
            mutateColor.splice(index, 1, digit)
            this.color = mutateColor.join('')
            this.setColor(this.color)
        },
        randomColor: function() {
            this.color = '#' + ('00' + Math.floor(Math.random() * 16777216).toString(16)).substr(-6)
            this.setColor(this.color)
        }
    }
})

编译

CSS

@import url("https://fonts.googleapis.com/css?family=Rokkitt");
:root {
    --color: #000000;
    --font: 'Rokkitt';
}
.channel {
    position: relative;
    width: 3vmax;
    height: 3vmax;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    cursor: -webkit-grab;
}
.channel:hover:not(.hash) .digits {
    background: rgba(255, 255, 255, 0.1);
}
.channel.moving {
    cursor: -webkit-grabbing;
}
.channel.moving .digits {
    -webkit-transition-duration: 120ms;
    transition-duration: 120ms;
}
.channel.hash {
    cursor: pointer;
    text-decoration: underline;
}
.digits {
    position: relative;
    -webkit-transform: translateY(var(--y));
    transform: translateY(var(--y));
    -webkit-transition: -webkit-transform 650ms;
    transition: -webkit-transform 650ms;
    transition: transform 650ms;
    transition: transform 650ms, -webkit-transform 650ms;
    pointer-events: auto;
    border-radius: .3em;
}
.digit {
    padding: 50%;
    line-height: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: .3;
    -webkit-transition: all 300ms;
    transition: all 300ms;
}
.digit.current {
    border-radius: .3em;
    opacity: 1;
}
.digit.current span {
    font-size: 2.7em;
}
.digit span {
    font-size: 1.5em;
}
.name {
    position: absolute;
    top: 50%;
    left: 70%;
    margin: 0;
    -webkit-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
}
.name small {
    font-weight: 300;
    position: absolute;
    top: 130%;
    left: 0;
    color: rgba(255, 255, 255, 0.5);
}
body {
    margin: 0;
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-family: var(--font), Helvetica, Arial, sans-serif;
    background: var(--color);
    -webkit-transition: background 300ms linear;
    transition: background 300ms linear;
    background-image: -webkit-radial-gradient(center circle, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.2));
    background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.2));
    color: #fff;
    overflow: hidden;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
footer {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 1em;
    opacity: .5;
}
footer a {
    color: inherit;
}

HTML

Vue.js + ntc.js Visual Hexadecimal Color, 很有创意的一个作品！

vue, color

编辑器支持Emmet

快捷键

Vue.js + ntc.js Visual Hexadecimal Color, 很有创意的一个作品！

vue, color

使用VueJS构建的一款带颜色提示密码强度的密码输入框控件

使用VueJS制作的颜色调和卡（色轮）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：