旋转的风车—利用css3新属性

最新推荐文章于 2021-09-26 13:52:35 发布

atom_hc

最新推荐文章于 2021-09-26 13:52:35 发布

阅读量2k

点赞数

分类专栏： HTML、css 文章标签： css3 html

本文链接：https://blog.csdn.net/atom_hc/article/details/53312216

版权

这篇博客展示了如何利用CSS3的新属性来创建旋转的风车效果。通过定义不同颜色的风车叶片并应用旋转变换，以及为父元素设置动画效果实现风车旋转。最后，还添加了枝干样式，使整体效果更逼真。

摘要由CSDN通过智能技术生成

效果图：
这里写图片描述
HTML代码部分：

<div id="wrap">//设置一个大容器包裹风车的4片叶子
        <div id="red"></div>
        <div id="yellow"></div>
        <div id="pink"></div>
        <div id="cyna"></div>
</div>
<div id="limb"></div>//风车的枝干

CSS代码部分：
1、先设置4个风车叶
div{ border-radius: 50%;position: absolute; }
#red{
border-top:100px solid red;
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
border-left: 100px solid red;
transform:rotate(-45deg);
left:150px;
top:50px;
}
#yellow{
border-top:100px solid yellow;
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
border-