HTML + CSS 实现一个小风车

HTML + CSS 实现一个风车

其实就是 CSS border 属性的使用。

使用 border 属性设置一个三角形

<style>
  .test {
    height: 200px;
    width: 200px;
    background-color: aqua;
    border: 20px solid;
    /* 为了方便观察，将各个边设置成不同的颜色 */
    border-left-color: blueviolet;
    border-right-color: brown;
    border-top-color: cornflowerblue;
    border-bottom-color: gold;
  }
</style>

<div class="test"></div>

在 Chrome 浏览器中我们可以看到如下的效果：

当我们将宽高都设置为 0 的时候，就能看到：

有点三角形的意思了，继续将 border 的宽度调大，我们可以看到：

现在就能看到三角形的样式了，接下来就使用 border-color 属性，将不需要显示的边框隐藏即可：

.test {
  border: 160px solid;
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-color: transparent;
  border-bottom-color: gold;
}
</head>

现在我们就可以看到一个三角形了：

实现小风车

实现了三角形，就不难实现小风车了，只需要创建 4 个这样的三角形，按照一定的组合就能达到风车的效果：

<style>
.windmill {
  position: relative;
  z-index: 10;
  width: 200px;
  height: 200px;
  animation: circle 2s infinite linear;
}

.stick {
  position: absolute;
  top: 95px;
  left: 102.5px;
  height: 200px;
  width: 10px;
  background: royalblue;
  border-radius: 5px;
}

.triangle {
  position: absolute;
  height: 0;
  border: 50px solid transparent;
}

.triangle.right {
  border-right-color: red;
}

.triangle.bottom {
  left: 100px;
  border-bottom-color: yellow;
}

.triangle.left {
  top: 100px;
  left: 100px;
  border-left-color: coral;
}

.triangle.top {
  top: 100px;
  border-top-color: cyan;
}

@keyframes circle {
  to {
    transform: rotate(0);
  }
  from {
    transform: rotate(360deg);
  }
}
</style>

<div class="windmill">
  <div class="triangle right"></div>
  <div class="triangle bottom"></div>
  <div class="triangle left"></div>
  <div class="triangle top"></div>
</div>
<div class="stick"></div>

对了，“好用的简易图”小程序上线了，现在因为时间问题并没有实现很多很棒的功能，但是后续都会慢慢实现的，这也是我的一个小尝试，感兴趣的朋友可以搜索关注一下，感谢感谢。

最终的效果如下：