html彩色风车,Velocity.js+CSS3 彩色风车（Pinwheel）

CSS

语言：

CSSSCSS

确定

html,

body {

overflow: hidden;

}

.pinwheel {

position: relative;

width: 300px;

height: 300px;

left: 50%;

margin-left: -150px;

margin-top: 100px;

z-index: 200;

}

.middle {

width: 25px;

height: 25px;

border-radius: 50%;

position: absolute;

background-color: silver;

top: 137px;

left: 137px;

z-index: 200;

}

.red-pin {

content: "";

width: 100px;

display: block;

border-top: 100px solid red;

border-left: 100px solid transparent;

position: relative;

/* IE 9 */

margin-top: 0px;

/* Chrome, Safari, Opera */

-ms-transform: rotate(90deg);

-webkit-transform: rotate(90deg);

transform: rotate(90deg);

}

.red-pin:before {

content: "";

width: 0px;

display: block;

border-bottom: 100px solid darkred;

border-left: 100px solid transparent;

position: absolute;

margin-top: -100px;

margin-left: 0px;

}

.blue-pin {

content: "";

width: 100px;

display: block;

border-top: 100px solid blue;

border-left: 100px solid transparent;

position: relative;

margin-top: -50px;

/* IE 9 */

margin-left: 150px;

/* Chrome, Safari, Opera */

-ms-transform: rotate(180deg);

-webkit-transform: rotate(180deg);

transform: rotate(180deg);

}

.blue-pin:before {

content: "";

width: 0px;

display: block;

border-bottom: 100px solid navy;

border-left: 100px solid transparent;

position: absolute;

margin-top: -100px;

margin-left: 0px;

}

.yellow-pin {

content: "";

width: 100px;

display: block;

border-top: 100px solid yellow;

border-left: 100px solid transparent;

position: relative;

margin-top: 50px;

/* IE 9 */

margin-left: 100px;

/* Chrome, Safari, Opera */

-ms-transform: rotate(270deg);

-webkit-transform: rotate(270deg);

transform: rotate(270deg);

}

.yellow-pin:before {

content: "";

width: 0px;

display: block;

border-bottom: 100px solid goldenrod;

border-left: 100px solid transparent;

position: absolute;

margin-top: -100px;

margin-left: 0px;

}

.green-pin {

content: "";

width: 100px;

display: block;

border-top: 100px solid green;

border-left: 100px solid transparent;

position: relative;

margin-top: -150px;

margin-left: -50px;

}

.green-pin:before {

content: "";

width: 0px;

display: block;

border-bottom: 100px solid darkgreen;

border-left: 100px solid transparent;

position: absolute;

margin-top: -100px;

margin-left: 0px;

}

.pinwheel-stem {

width: 15px;

height: 200px;

display: block;

position: relative;

left: 50%;

margin-left: -7.5px;

background-color: silver;

margin-top: -100px;

z-index: 100;

}