CSS3技術(shù)的不斷發(fā)展，已經(jīng)為我們帶來(lái)了很多驚喜，其中包括能夠制作風(fēng)車圓心扭曲扇葉的效果。

.windmill {
position: relative;
width: 200px;
height: 200px;
margin: 50px auto;
box-shadow: 0 0 20px rgba(0, 0, 0, .3);
}
.windmill:before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 6px;
height: 90px;
margin: -45px 0 0 -3px;
background: #ccc;
border-radius: 2px;
transform-origin: center top;
transform: rotate(0deg);
animation: rotate 2s infinite linear;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.windmill:after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
margin-left: -50px;
width: 100px;
height: 100px;
background: #ccc;
transform-origin: center top;
transform: skew(0deg, -10deg) rotate(0deg);
animation: rotateLeaf 2s infinite linear;
}
@keyframes rotateLeaf {
from {
transform: skew(0deg, -10deg) rotate(0deg);
}
to {
transform: skew(0deg, -10deg) rotate(-360deg);
}
}

通過(guò)設(shè)置偽元素:before來(lái)定義圓心，設(shè)置偽元素:after來(lái)定義扇葉。對(duì)于圓心的效果，我們利用transform-origin來(lái)將旋轉(zhuǎn)變?yōu)閳A心旋轉(zhuǎn)，同時(shí)使用@keyframes動(dòng)畫將其轉(zhuǎn)動(dòng)。對(duì)于扇葉，我們同樣利用@keyframes動(dòng)畫，將其傾斜，并實(shí)現(xiàn)扇葉的轉(zhuǎn)動(dòng)效果。

實(shí)現(xiàn)效果：一個(gè)圓心不斷轉(zhuǎn)動(dòng)的風(fēng)車中，扇葉也不斷旋轉(zhuǎn)，呈現(xiàn)出一種很棒的視覺(jué)效果。