1+X学习日志——扇形2D效果

section{

width: 500px;

height: 300px;

border-bottom: 10px solid black;

position: relative;

margin: 100px auto;

}

div{

width: 30px;

height: 250px;

text-align: center;

left: 235px;

bottom: 15px;

position:absolute;

    transition: 1s;

    transform-origin: bottom;

}

div:nth-child(7){

    background-color:black;

}

section:hover div:nth-child(1){

    transform:rotate(90deg);

    background: #66ccff;

}

section:hover div:nth-child(1){

    transform:rotate(75deg);

    background: #4e7386;

}

section:hover div:nth-child(2){

    transform:rotate(60deg);

    background: #20739c;

}

section:hover div:nth-child(3){

    transform:rotate(45deg);

    background: #344b1b;

}

section:hover div:nth-child(4){

    transform:rotate(30deg);

    background: #cc74a0;

}

section:hover div:nth-child(5){

    transform:rotate(15deg);

    background: #b1c760;

}

section:hover div:nth-child(6){

    transform:rotate(-15deg);

    background: #9bacb4;

}

section:hover div:nth-child(8){

    transform:rotate(-30deg);

    background: #63147a;

}

section:hover div:nth-child(9){

    transform:rotate(-45deg);

    background: #a31953;

}

section:hover div:nth-child(10){

    transform:rotate(-60deg);

    background: #10b4e6;

}

section:hover div:nth-child(11){

    transform:rotate(-75deg);

    background: #28b42f;

}

section:hover div:nth-child(12){

    transform:rotate(-90deg);

    background: #962655;

}

section:hover div:nth-child(13){

    transform:rotate(90deg);

    background: #8b7807;

}

section:hover div:nth-child(7){

    background: #66ccff;

}

巴特西

1+X学习日志——扇形2D效果

最新文章

热门文章