Pulse Of The Blogosphere » Bảng mã màu

HOME / Other / CSS / Bảng mã màu

Bảng mã màu

Author: admin - Posted: 24/09/21 - Update: 24/09/21

-- Tham khảo:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root {
            --baseWidth: 60px
        }

        #root {
            display: flex;
            flex-wrap: wrap;
        }

        .content {
            position: relative;
            margin: 10px;
            width: 400px;
            height: 400px;
            background-color: rgb(221, 210, 210);
        }

        .circle {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: calc((var(--i) + 1) * var(--baseWidth));
            height: calc((var(--i) + 1) * var(--baseWidth));
            border-radius: 50%;
            overflow: hidden;
        }

        .piece {
            position: absolute;
            top: 50%;
            left: 50%;
            width: calc((var(--i) + 1) / 2 * var(--baseWidth));
            height: calc((var(--i) + 1) / 4 * var(--baseWidth));
            transform: rotate(calc(var(--j) * 30deg)) skewX(60deg);
            transform-origin: 0 0;
            background-color: var(--color);
        }

        /*  itemColor.style.transform = `rotate(${j * 30}deg) skewX(60deg)`  */
    </style>
</head>

<body>
    <div id="root">
        <div class="content gray"></div>
        <div class="content black"></div>
        <div class="content white"></div>
    </div>
    <input id="ipColor" type="color">
    <script>
        const baseColor = ['#F00', '#F80', '#FF0', '#8F0', '#0F0', '#0F8', '#0FF', '#08F', '#00F', '#80F', '#F0F', '#F08']
        const turnColor = {
            toGrey: {
                0: ["8", "6", "4", "2", "0"],
                8: ["8", "8", "8", "8", "8"],
                F: ["8", "9", "B", "D", "F"],
            },
            toWhite: {
                0: ["F", "C", "9", "6", "3", "0"],
                8: ["F", "E", "D", "C", "A", "8"],
                F: ["F", "F", "F", "F", "F", "F"],
            },
            toBlack: {
                0: ["0", "0", "0", "0", "0", "0"],
                8: ["0", "1", "2", "4", "6", "8"],
                F: ["0", "3", "6", "9", "C", "F"],
            }
        }
        const listCircleGray = [],
            listCircleWhite = [],
            listCircleBlack = [];

        //listCircleGray from 0 to 4 => to Gray
        for (let i = 0; i < 5; i++) {
            listCircleGray[i] = baseColor.map(base => {
                let rgb = base.split('')
                rgb.shift()
                let newRgb = rgb.map(item => {
                    return turnColor.toGrey[item][i]
                })
                return "#" + newRgb.join('')
            })
        }

        //listCircleWhite from 0 to 5 => to White
        for (let i = 0; i < 6; i++) {
            listCircleWhite[i] = baseColor.map(base => {
                let rgb = base.split('')
                rgb.shift()
                let newRgb = rgb.map(item => {
                    return turnColor.toWhite[item][i]
                })
                return "#" + newRgb.join('')
            })
        }

        //listCircleBlack from 0 to 5 => to White
        for (let i = 0; i < 6; i++) {
            listCircleBlack[i] = baseColor.map(base => {
                let rgb = base.split('')
                rgb.shift()
                let newRgb = rgb.map(item => {
                    return turnColor.toBlack[item][i]
                })
                return "#" + newRgb.join('')
            })
        }

        console.log(listCircleGray);

        const grayElement = document.querySelectorAll('.content.gray')[0]
        const blackElement = document.querySelectorAll('.content.black')[0]
        const whiteElement = document.querySelectorAll('.content.white')[0]

        let content_gray = '', content_black = '', content_white = '';
        for (let i = 4; i >= 0; i--) {
            let listPieceGray = ''
            for (let j = 0; j < 12; j++) {
                listPieceGray += `<div class="piece" style="--i:${i}; --j:${j} ; --color:${listCircleGray[i][j]}"></div>`
            }
            content_gray += `<div class="circle" style="--i:${i}">${listPieceGray}</div>`
        }

        for (let i = 5; i >= 0; i--) {
            let listPieceBlack = '', listPieceWhite = '';
            for (let j = 0; j < 12; j++) {
                listPieceBlack += `<div class="piece" style="--i:${i}; --j:${j} ; --color:${listCircleBlack[i][j]}"></div>`
                listPieceWhite += `<div class="piece" style="--i:${i}; --j:${j} ; --color:${listCircleWhite[i][j]}"></div>`
            }
            content_black += `<div class="circle" style="--i:${i}">${listPieceBlack}</div>`
            content_white += `<div class="circle" style="--i:${i}">${listPieceWhite}</div>`
        }

        grayElement.innerHTML = content_gray;
        blackElement.innerHTML = content_black;
        whiteElement.innerHTML = content_white;
    </script>
</body>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

:root {

--baseWidth: 60px

}

#root {

display: flex;

flex-wrap: wrap;

}

.content {

position: relative;

margin: 10px;

width: 400px;

height: 400px;

background-color: rgb(221, 210, 210);

}

.circle {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: calc((var(--i) + 1) * var(--baseWidth));

height: calc((var(--i) + 1) * var(--baseWidth));

border-radius: 50%;

overflow: hidden;

}

.piece {

position: absolute;

top: 50%;

left: 50%;

width: calc((var(--i) + 1) / 2 * var(--baseWidth));

height: calc((var(--i) + 1) / 4 * var(--baseWidth));

transform: rotate(calc(var(--j) * 30deg)) skewX(60deg);

transform-origin: 0 0;

background-color: var(--color);

}

/* itemColor.style.transform = `rotate(${j * 30}deg) skewX(60deg)` */

</style>

</head>

<body>

</div>

const baseColor = ['#F00', '#F80', '#FF0', '#8F0', '#0F0', '#0F8', '#0FF', '#08F', '#00F', '#80F', '#F0F', '#F08']

const turnColor = {

toGrey: {

0: ["8", "6", "4", "2", "0"],

8: ["8", "8", "8", "8", "8"],

F: ["8", "9", "B", "D", "F"],

toWhite: {

0: ["F", "C", "9", "6", "3", "0"],

8: ["F", "E", "D", "C", "A", "8"],

F: ["F", "F", "F", "F", "F", "F"],

toBlack: {

0: ["0", "0", "0", "0", "0", "0"],

8: ["0", "1", "2", "4", "6", "8"],

F: ["0", "3", "6", "9", "C", "F"],

}

const listCircleGray = [],

listCircleWhite = [],

listCircleBlack = [];

//listCircleGray from 0 to 4 => to Gray

for (let i = 0; i < 5; i++) {

listCircleGray[i] = baseColor.map(base => {

let rgb = base.split('')

rgb.shift()

let newRgb = rgb.map(item => {

return turnColor.toGrey[item][i]

})

return "#" + newRgb.join('')

})

}

//listCircleWhite from 0 to 5 => to White

for (let i = 0; i < 6; i++) {

listCircleWhite[i] = baseColor.map(base => {

let rgb = base.split('')

rgb.shift()

let newRgb = rgb.map(item => {

return turnColor.toWhite[item][i]

})

return "#" + newRgb.join('')

})

}

//listCircleBlack from 0 to 5 => to White

for (let i = 0; i < 6; i++) {

listCircleBlack[i] = baseColor.map(base => {

let rgb = base.split('')

rgb.shift()

let newRgb = rgb.map(item => {

return turnColor.toBlack[item][i]

})

return "#" + newRgb.join('')

})

}

console.log(listCircleGray);

const grayElement = document.querySelectorAll('.content.gray')[0]

const blackElement = document.querySelectorAll('.content.black')[0]

const whiteElement = document.querySelectorAll('.content.white')[0]

let content_gray = '', content_black = '', content_white = '';

for (let i = 4; i >= 0; i--) {

let listPieceGray = ''

for (let j = 0; j < 12; j++) {

listPieceGray += `<div class="piece" style="--i:${i}; --j:${j} ; --color:${listCircleGray[i][j]}"></div>`

}

content_gray += `<div class="circle" style="--i:${i}">${listPieceGray}</div>`

}

for (let i = 5; i >= 0; i--) {

let listPieceBlack = '', listPieceWhite = '';

for (let j = 0; j < 12; j++) {

listPieceBlack += `<div class="piece" style="--i:${i}; --j:${j} ; --color:${listCircleBlack[i][j]}"></div>`

listPieceWhite += `<div class="piece" style="--i:${i}; --j:${j} ; --color:${listCircleWhite[i][j]}"></div>`

}

content_black += `<div class="circle" style="--i:${i}">${listPieceBlack}</div>`

content_white += `<div class="circle" style="--i:${i}">${listPieceWhite}</div>`

}

grayElement.innerHTML = content_gray;

blackElement.innerHTML = content_black;

whiteElement.innerHTML = content_white;

</script>

</body>

</html>

CSS

CSS – Animation xoay tròn