HTML+CSS实现一个小风车

发布网友 发布时间：2024-10-02 12:48

我来回答

共1个回答

热心网友 时间：2024-11-30 18:29

HTML+CSS实现一个风车

其实就是CSSborder属性的使用。

使用border属性设置一个三角形<style>.test{height:200px;width:200px;background-color:aqua;border:20pxsolid;/*为了方便观察，将各个边设置成不同的颜色*/border-left-color:blueviolet;border-right-color:brown;border-top-color:cornflowerblue;border-bottom-color:gold;}</style><divclass="test"></div>

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

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

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

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

.test{border:160pxsolid;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:circle2sinfinitelinear;}.stick{position:absolute;top:95px;left:102.5px;height:200px;width:10px;background:royalblue;border-radius:5px;}.triangle{position:absolute;height:0;border:50pxsolidtransparent;}.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;}@keyframescircle{to{transform:rotate(0);}from{transform:rotate(360deg);}}</style><divclass="windmill"><divclass="triangleright"></div><divclass="trianglebottom"></div><divclass="triangleleft"></div><divclass="triangletop"></div></div><divclass="stick"></div>

最终的效果如下：

原文：https://juejin.cn/post/7099069242196115464