前端特效（2）--旋转的风车

旋转的风车效果主要利用的知识点：

1. 变形：transform:rotate() // 旋转度数(deg)
2. 过渡：
   transition集合样式(css3的动画的一种)
   transition-property：要运动的样式(all || [attr] || none)
   transition-duration：规定完成过渡效果需要多少秒或毫秒
   transition-delay：定义动画延迟多久开始
   transition-timing-function：运动速度曲线。

ease：(逐渐变慢)默认值；
linear：(匀速)；
ease-in：(加速)；
ease-out：(减速)；
ease-in-out：(先加速后减速)；
cubic-bezier 贝塞尔曲线( x1, y1, x2, y2)可以百度一下贝赛尔曲线的图

3. 圆角：
   border-radius集合样式
   (border-top-left-radius/border-top-right-radius/border-bottom-right-radius/border-bottom-left-radius)
   1-4个数字 / 1-4个数字：/前面是水平方向圆角，后面是垂直方向圆角，不加/指的两个方向圆角相同，如：
   border-radius: 10px/5px;
   参数：各种长度单位都可以：px，%，…，%有时很方便，但宽高不一致时不太好
   参数个数1：四个方向都一样，border-radius: 一样
   参数个数2：对角，border-radius: 左上&右下 右上&左下
   参数个数3：斜对角，border-radius: 左上 右上&左下 右下
   参数个数4：全部，顺时针，border-radius: 左上 右上 右下 左

参考代码：

  <style>
    .parent{
        width:600px;
        height:600px;
        margin: 0 auto;
        overflow: hidden;
        /* border: 1px #000 solid; */
        transition: 10s all linear;

    }
    .parent>div {
        width:300px;
        height: 300px;
        background-color: red;
        float:left;
    }
     .parent>div:nth-child(1),.parent>div:nth-child(4){
        border-radius: 0%  90%;
    } 
    .parent>div:nth-child(2),.parent>div:nth-child(3){
        border-radius: 90% 0%;
    }
    .parent:hover{
        transform: rotate(1800deg);
    }
    </style>

效果图：（此处有动画效果 鼠标悬停在上面的时候进行旋转）