CSS3技術(shù)的不斷發(fā)展，已經(jīng)為我們帶來了很多驚喜，其中包括能夠制作風(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);
}
}

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

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