css动画风车

CSS动画是一种用于制作网页效果的技术。今天，我们将为您介绍一种很常见的动画效果，叫做风车。

.windmill {
    position: relative;
    width: 80px;
    height: 80px;
    border: 2px solid #333;
    animation: rotate 1s infinite linear;
}
.windmill:before {
    content: "";
    position: absolute;
    top: 0;
    left: 40px;
    width: 6px;
    height: 40px;
    border-radius: 5px;
    background-color: #333;
}
.windmill:after {
    content: "";
    position: absolute;
    top: 35px;
    left: 35px;
    width: 40px;
    height: 6px;
    border-radius: 5px;
    background-color: #333;
}
@keyframes rotate {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
    

上面的代码中，我们首先定义了一个 CSS 类名为“windmill”，它的样式属性包括了 height、width、border、position 等。接着，我们使用伪元素 :before 和 :after 分别在风车的顶部和中心创建了两个组成部分。这两个元素的样式属性中包括了宽度、高度、背景颜色、圆角等信息。

接下来，我们定义了一个名为“rotate”的动画，从 0 度旋转到 360 度。最后，在风车的样式属性中使用 animation 属性，将它应用到风车上，并设定其无限循环。

风车动画效果是一种很好的用于装饰网页的效果。通过灵活地调整 CSS 样式属性，我们可以创建出各种形状和颜色的风车。

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