利用transform:rotate( )制作折扇

最新推荐文章于 2024-08-18 20:43:47 发布

weixin_30687811

最新推荐文章于 2024-08-18 20:43:47 发布

阅读量272

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/web-learning/p/10273622.html

本文分享了一个使用CSS transform:rotate()属性制作折扇动画的详细过程。通过定位和旋转多个彩色矩形来模仿折扇的开合效果，适用于网页设计中的创意元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

跟大家分享一个利用transform:rotate( )制作折扇小案例的过程！
效果开始前
加了效果后

制作思路：扇子是由一个个不同颜色的小长方形围绕自身相同的旋转原点旋转而成的。所有的小方块都是在一个大方块里，只是大方块没设置背景颜色，只设置了下边框。鼠标没滑过前，所有的小方块是折叠在一起的，这个折叠是通过定位做的。接下来制作时，我们只需要先做出一个小方块的旋转效果，其他的再复制粘贴微调background和旋转角度即可

其他的div在后面做出了一个小方块的效果后再加上

<section>
        <div></div>
</section>

定位的位置bottom不能为0。不然就越过border了。

section{
            width: 600px;
            height: 300px;
            margin: 0 auto;
            border-bottom: 3px solid red;
            position: relative;
        }
        div{
            width: 30px;
            height: 120px;
            background:pink;            
            position: absolute;
            left:290px;
            bottom: 15px;
            transition: 1s;
            transform-origin: center bottom;
        }

接下来制作旋转效果

section:hover div:nth-child(1){
            background: red;
            transform:rotate(90deg);
        }

第一个旋转方块已经做好，其余的小方块样式再加上background和transform就行了

转载于:https://www.cnblogs.com/web-learning/p/10273622.html