css3光束_CSS3 链接的扇形光束

CSS

语言：

CSSSCSS

确定

body {

background: black;

overflow: hidden;

}

.clipper {

position: absolute;

width: 100px;

height: 100px;

margin: -100px -100px;

top: 100px;

left: 300px;

overflow: hidden;

}

.clipper:nth-child(1) {

-webkit-transform: translate(100%, 0);

-ms-transform: translate(100%, 0);

transform: translate(100%, 0);

}

.clipper:nth-child(2) {

-webkit-transform: translate(0, 0) rotate(180deg);

-ms-transform: translate(0, 0) rotate(180deg);

transform: translate(0, 0) rotate(180deg);

}

.clipper:nth-child(3) {

-webkit-transform: translate(0, 100%);

-ms-transform: translate(0, 100%);

transform: translate(0, 100%);

}

.clipper:nth-child(4) {

-webkit-transform: translate(-100%, 100%) rotate(180deg);

-ms-transform: translate(-100%, 100%) rotate(180deg);

transform: translate(-100%, 100%) rotate(180deg);

}

.clipper:nth-child(5) {

-webkit-transform: translate(-100%, 200%);

-ms-transform: translate(-100%, 200%);

transform: translate(-100%, 200%);

}

.clipper:nth-child(6) {

-webkit-transform: translate(-200%, 200%) rotate(180deg);

-ms-transform: translate(-200%, 200%) rotate(180deg);

transform: translate(-200%, 200%) rotate(180deg);

}

.clipper:nth-child(7) {

-webkit-transform: translate(-200%, 300%);

-ms-transform: translate(-200%, 300%);<