【前端小案例】CSS旋转小风车

前言

兴趣是最好的老师。让我们一起在玩闹中学习吧，这次做个旋转风车吧，学以致用，熟能生巧。

动画.gif

一、制作步骤

1. 首先设置一个200*400大小的盒子windmill
2. 里面放入三个盒子分别是风车的叶片、固定点、柄，设置背景色，利用绝对定位调整好位置。
3. 风车的叶片由四个小盒子组成，利用border画出三角形，通过绝对定位调整好位置。
4. 对整个风车的叶片的盒子添加旋转动画。

二、详细代码

html部分

css部分

body {
    height: 100vh;
    background: pink;
    display: flex;
    justify-content: center;
    align-items: center;
}

.windmill {
    position: relative;
    width: 200px;
    height: 400px;
}

.fan {
    position: relative;
    width: 200px;
    height: 200px;
    animation: rotate 3s linear infinite;
}

.fan:hover {
    animation: rotate 1s linear infinite;
}

.stick {
    position: absolute;
    left: 92px;
    bottom: 0px;
    z-index: -1;
    width: 16px;
    height: 300px;
    background: #b67e4f;
    border-radius: 20px;
}

.dot {
    position: absolute;
    left: 90px;
    top: 90px;
    z-index: 1;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #515151;
}

.top {
    position: absolute;
    top: 0px;
    left: 0px;
    border-top: 50px solid transparent;
    border-right: 50px solid #f4d458;
    border-bottom: 50px solid #f6ef9b;
    border-left: 50px solid #f6ef9b;
}

.right {
    position: absolute;
    top: 0px;
    right: 0px;
    border-top: 50px solid #f28b1c;
    border-right: 50px solid transparent;
    border-bottom: 50px solid #e63e3b;
    border-left: 50px solid #f28b1c;
}

.bottom {
    position: absolute;
    bottom: 0px;
    right: 0px;
    border-top: 50px solid #8cb3df;
    border-right: 50px solid #8cb3df;
    border-bottom: 50px solid transparent;
    border-left: 50px solid #3874b9;
}

.left {
    position: absolute;
    bottom: 0px;
    left: 0px;
    border-top: 50px solid #32b273;
    border-right: 50px solid #c3d864;
    border-bottom: 50px solid #c3d864;
    border-left: 50px solid transparent;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

gitee地址：siebe/html-css-demo (https://gitee.com/siebe/html-css-demo)

每天一个网页小案例，生活多姿又多彩。