css3旋转风车

CSS3旋转风车是一个很有趣的动画效果，它可以让风车像真正的风车一样转动起来，增加页面的趣味性和吸引力。下面我们来学习如何实现一个简单的旋转风车。

.windmill {
    width: 100px;
    height: 100px;
    position: relative;
}
.windmill__blade {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: bottom right;
    animation: windmill-spin 2s ease-in-out infinite;
}
.windmill__blade--2 {
    transform-origin: bottom left;
}
.windmill__blade--3 {
    transform: rotate(180deg);
    transform-origin: bottom right;
}
.windmill__blade--4 {
    transform: rotate(180deg);
    transform-origin: bottom left;
}
@keyframes windmill-spin {
0% {
    transform: rotate(0);
}
100% {
    transform: rotate(360deg);
}
}
    

我们首先创建一个容器，即.windmill类，然后在容器内创建四个叶片，即.windmill__blade类，并分别用transform-origin属性规定它们的变形基点，以便在动画中实现旋转效果。接着，我们使用动画属性animation，并指定旋转时间、旋转方式和循环次数，同时创建一个名为windmill-spin的动画帧，设置叶片的起始状态和结束状态，即0%时叶片角度为0度，100%时叶片角度为360度。

最后，我们在HTML中创建风车实例，即.windmill元素，包含四个叶片实例，即.windmill__blade元素，然后附加相应的类名，即可实现简单的旋转风车效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！