Java风车动画代码_javav 的日志-在html页面中展示一个不停转动的风车(动画)

Title

.box{

width: 10px;

height: 10px;

/*border: 1px solid black;*/

position: relative;

left: 800px;

top: 400px;

transform-origin: 0 0;

animation: a1 10s linear infinite;

}

@keyframes a1 {

from{

transform: rotate(0deg);

}

to{

transform: rotate(360deg);

}

}

.b1{

width: 200px;

height: 100px;

position: absolute;

top: -100px;

border-radius: 100px 100px 0 0 ;

background-color: blue;

}

.b2{

width: 100px;

height: 200px;

position: absolute;

border-radius: 0 100px 100px 0 ;

background-color: red;

}

.b3{

width: 200px;

height: 100px;

position: absolute;

left: -200px;

border-radius: 0 0 100px 100px ;

background-color: black;

}

.b4{

width: 100px;

height: 200px;

position: absolute;

top: -200px;

left: -100px;

border-radius: 100px 0 0 100px ;

background-color: green;

}

.g{

width: 5px;

height: 400px;

background-color: black;

position: absolute;

left: 800px;

top: 400px;

}