html5中给圆环添加颜色,HTML5环形色卡

CSS

语言：

CSSSCSS

确定

.wrapper {

width: 100vw;

height: 100vh;

-webkit-transition: background .3s;

transition: background .3s;

}

.palette {

width: 300px;

height: 300px;

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

margin: auto;

}

.palette .palette_item_wrapper {

-webkit-transition: -webkit-transform .4s;

transition: -webkit-transform .4s;

transition: transform .4s;

transition: transform .4s, -webkit-transform .4s;

width: 100%;

height: 100%;

border-radius: 50%;

-webkit-transform: translateX(100px);

transform: translateX(100px);

-webkit-transition-delay: .4s;

transition-delay: .4s;

}

.palette.palette__opened .palette_item_wrapper {

-webkit-transform: translateX(0);

transform: translateX(0);

-webkit-transition-delay: 0s;

transition-delay: 0s;

}

.palette.palette__opened .palette_color {

-webkit-transition-delay: .2s;

transition-delay: .2s;

}

.palette.palette__opened .palette_color:nth-child(1) {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

.palette.palette__opened .palette_color:nth-child(2) {

-webkit-transform: rotate(36deg);

transform: rotate(36deg);

}

.palette.palette__opened .palette_color:nth-child(3) {

-webkit-transform: rotate(72deg);

transform: rotate(72deg);

}

.palette.palette__opened .palette_color:nth-child(4) {

-webkit-transform: rotate(108deg);

transform: rotate(108deg);

}

.palette.palette__opened .palette_color:nth-child(5) {

-webkit-transform: rotate(144deg);

transform: rotate(144deg);

}

.palette.palette__opened .palette_color:nth-child(6) {

-webkit-transform: rotate(180deg);

transform: rotate(180deg);

}

.palette.palette__opened .palette_color:nth-child(7) {

-webkit-transform: rotate(216deg);

transform: rotate(216deg);

}

.palette.palette__opened .palette_color:nth-child(8) {

-webkit-transform: rotate(252deg);

transform: rotate(252deg);

}

.palette.palette__opened .palette_color:nth-child(9) {

-webkit-transform: rotate(288deg);

transform: rotate(288deg);

}

.palette.palette__opened .palette_color:nth-child(10) {

-webkit-transform: rotate(324deg);

transform: rotate(324deg);

}

.palette .palette_color,

.palette .palette_color__main {

position: absolute;

border-radius: 50%;

cursor: pointer;

border-style: solid;

border-color: #ffffff;

box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);

}

.palette .palette_color__main {

background-color: #e16969;

width: 100px;

height: 100px;

-webkit-transition: background .3s;

transition: background .3s;

border-width: 6px;

left: 0;

right: 0;

top: 0;

bottom: 0;

margin: auto;

}

.palette .palette_color {

width: 50px;

height: 50px;

display: block;

-webkit-transform-origin: 250% 50%;

transform-origin: 250% 50%;

-webkit-transition: -webkit-transform .5s;

transition: -webkit-transform .5s;

transition: transform .5s;

transition: transform .5s, -webkit-transform .5s;

border-width: 3px;

-webkit-transition-delay: 0s;

transition-delay: 0s;

left: 12px;

top: 0;

bottom: 0;

margin: auto;

}