css扇子展开,css折扇特效

* {

margin:0;

padding:0;

}

.box {

width:600px;

height:300px;

border-bottom:3px solid;

margin:100px auto;

position:relative;

}

.box div {

width:50px;

height:210px;

background-color:#9D2933;

position:absolute;

left:270px;

top:50px;

box-shadow:3px 3px 5px #333;

border-radius:0px 0px 90px 90px;

transform-origin:center bottom;

transition:all 1s ease-out 0s;

transform-origin:50% 90%;

text-align:center;

font-size:14px;

line-height:30px;

font-style:italic;

font-weight:bolder;

letter-spacing:12px;

text-shadow:1px 1px 1px #09f;

color:#fff;

}

.box div:nth-child(1) {

background-color:orange;

}

.box:hover div:nth-child(1) {

transform:rotate(15deg);

opacity:0.8;

text-shadow:2px 2px 10px #09f;

}

.box div:nth-child(2) {

background-color:yellow;

}

.box:hover div:nth-child(2) {

transform:rotate(30deg);

opacity:0.8;

text-shadow:2px 2px 10px #09f;

}

.box div:nth-child(3) {

background-color:green;

}

.box:hover div:nth-child(3) {

transform:rotate(45deg);

opacity:0.8;

text-shadow:2px 2px 10px #09f;

}

.box div:nth-child(4) {

background-color:blue;

}

.box:hover div:nth-child(4) {

transform:rotate(60deg);

opacity:0.8;

text-shadow:2px 2px 10px #09f;

}

.box div:nth-child(5) {

background-color:aqua;

}

.box:hover div:nth-child(5) {

transform:rotate(75deg);

opacity:0.8;

text-shadow:2px 2px 10px #09f;

}

.box div:nth-child(6) {

background-color:#8A2BE2;

opacity:0.8;

}

.box:hover div:nth-child(13) {

transform:rotate(90deg);

opacity:0.8;

text-shadow:2px 2px 10px #09f;

}

.box div:nth-child(7) {

background-color:#999;

}

.box:hover div:nth-child(7) {

transform:rotate(-15deg);

opacity:0.8;

text-shadow:2px 2px 10px #09f;

}

.box div:nth-child(8) {

background-color:#b0929f;

}

.box:hover div:nth-child(8) {

transform:rotate(-30deg);

opacity:0.8;

text-shadow:2px 2px 10px #09f;

}

.box div:nth-child(9) {

background-color:#333;

}

.box:hover div:nth-child(9) {

transform:rotate(-45deg);

opacity:0.8;

text-shadow:2px 2px 10px #09f;

}

.box div:nth-child(10) {

background-color:#D24D57;

}

.box:hover div:nth-child(10) {

transform:rotate(-60deg);

opacity:0.8;

text-shadow:2px 2px 10px #09f;

}

.box div:nth-child(11) {

background-color:#09f;

}

.box:hover div:nth-child(11) {

transform:rotate(-75deg);

opacity:0.8;

text-shadow:2px 2px 10px #09f;

}

.box div:nth-child(12) {

background-color:#EAF2D3;

}

.box:hover div:nth-child(12) {

transform:rotate(-90deg);

opacity:0.8;

text-shadow:2px 2px 10px #09f;

}