html css做风车,css实现动态风车

html>

.main{

position: relative;

}

.main:hover{

}

@-webkit-keyframes dh{

0%{transform: rotate(0deg);}

100%{transform: rotate(360deg);}

}

@-webkit-keyframes dh1{

0%{transform: rotate(180deg);}

50%{transform: rotate(360deg);}

100%{transform: rotate(540deg);}

}

@-webkit-keyframes dh2{

0%{transform: rotate(90deg);}

100%{transform: rotate(450deg);}

}

@-webkit-keyframes dh3{

0%{transform: rotate(270deg);}

100%{transform: rotate(630deg);}

}

#boder_arrow{

border-width:100px 100px 120px 160px;

border-color:#f3ff66 #fff #fff #fff;

border-style:solid;

width:0px;

height:0px;

position: absolute;

top: 250px;

left: 10px;

-webkit-animation: dh 2.5s linear infinite;

transform-origin: right top;

}

#boder_arrow2{

border-width:100px 100px 120px 160px;

border-color:#32dd60 #fff #fff #fff;

border-style:solid;

width:0px;

height:0px;

transform: rotate(180deg);

position: absolute;

top: 250px;

left: 11px;

-webkit-animation: dh1 2.5s linear infinite;

transform-origin:right top;

}

#boder_arrow3{

border-width:100px 100px 120px 160px;

border-color:#f5c7d6 #fff #fff #fff;

border-style:solid;

width:0px;

height:0px;

transform: rotate(90deg);

position: absolute;

top: 248px;

left: 10px;

-webkit-animation: dh2 2.5s linear infinite;

transform-origin:right top;

}

#boder_arrow4{

border-width:100px 100px 120px 160px;

border-color:#66f9ff #fff #fff #fff;

border-style:solid;

width:0px;

height:0px;

transform: rotate(270deg);

position: absolute;

top: 250px;

left: 10px;

-webkit-animation: dh3 2.5s linear infinite;

transform-origin:right top;

}