怎样 做扇叶 css

在CSS中制作扇叶可以使用rotate函数和transition效果。

/*首先定义一个div元素作为扇叶*/div {
    width: 100px;
    height: 100px;
    background-color: green;
    position: relative;
    transform-origin: top left;
     /*设置旋转基点位置*/transition: transform 1s ease;
 /*添加过渡效果*/}
/*然后设置hover状态下的样式*/div:hover {
    transform: rotate(90deg);
 /*当鼠标指针悬停时旋转90度*/}
    

以上CSS代码中，transform-origin属性设置了旋转基点的位置，设为top left时，扇叶会围绕左上角旋转。transition属性添加了过渡效果，使扇叶旋转时会有一个平滑的过渡效果。在hover状态下，通过改变transform属性中rotate的度数来控制扇叶的旋转。通过改变rotate的度数可以实现不同角度的旋转效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！