2.花瓣特效----旋转+位移

1.html的布局：

<div class="raote-an"><!--背景区域-->
    <div class="container"><!--旋转的区域，内部div用来当花瓣的-->
      <div class="one"></div>
      <div class="two"></div>
      <div class="third"></div>
      <div class="four"></div>
      <div class="five"></div>
      <div class="six"></div>
      <div class="seven"></div>
      <div class="eigh"></div>
    </div>
  </div>

2. 思路：

在第一篇的旋转动画的基础上增加位移的距离：
1.若在animation做动画的时候，在x轴上作位移，translate（100px，0px），效果图如下所示：

2.若是在Y轴上做位移，translate（0px，100px）,效果图如下所示：

3.而在Z轴上加了之后，并没有好看的效果，就不演示了。最后一个效果是X轴和Y轴同时加位移，效果如下所示：

3.具体的CSS代码：

.raote-an{
      width: 100%;
      height: 500px;
      background: #424242 ;
    }
    .raote-an .container{
      position: relative;
      width: 480px;
      height: 480px;
      animation: mine3 5s linear infinite ;
      transition: all 5s;
    }
    @keyframes mine3 {
      0%{
        transform: rotate(0deg);
      }
      100%{
        transform: rotate(360deg);
      }
    }
    .raote-an .container div{
      position: absolute;
      width: 30px;
      height: 80px;
      left: 225px;
      top: 200px;
      border-radius: 0px 180px 0px 180px;
      box-shadow: inset 0rem 0rem 0rem 0.1rem #E645D0, 0rem 0rem 1.5rem 0rem #E645D0;
    }

    .raote-an .container .one{
      top: 165px;
      left: 260px;
      transform: rotate(45deg);
      animation: one 8s linear infinite;
    }
    .raote-an .container .two{
      left: 275px;
      transform: rotate(90deg);
      animation: two 8s  linear infinite;
    }
    .raote-an .container .third{
      top: 235px;
      left: 260px;
      transform: rotate(135deg);
      animation: three 8s linear infinite;
    }
    .raote-an .container .four{
      top: 250px;
      transform: rotate(180deg);
      animation: four 8s linear infinite;
    }
    .raote-an .container .five{
      top: 235px;
      left: 190px;
      transform: rotate(225deg);
      animation: five 8s linear infinite;
    }
    .raote-an .container .six{
      left: 175px;
      transform: rotate(270deg);
      animation: six 8s linear infinite;
    }
    .raote-an .container .seven{
      top: 165px;
      left: 190px;
      transform: rotate(315deg);
      animation: seven 8s linear infinite;
    }
    .raote-an .container .eigh{
      top: 150px;
      transform: rotate(360deg);
      animation: eigh 8s linear infinite;
    }
    @keyframes one {
      0%{
        transform: rotate(45deg) translate(0,0);
      }
      50%{
        box-shadow: inset 0rem 0rem 0rem 0.1rem #17E1E6, 0rem 0rem 1.5rem 0rem #17E1E6;
        transform: rotate(45deg) translate(100px,100px);
      }
    }
    @keyframes two {
      0%{
        transform: rotate(90deg) translate(0,0);
      }
      50%{
        box-shadow: inset 0rem 0rem 0rem 0.1rem #17E1E6, 0rem 0rem 1.5rem 0rem #17E1E6;
        transform: rotate(90deg) translate(100px,100px);
      }
    }
    @keyframes three {
      0%{
        transform: rotate(135deg) translate(0,0);
      }
      50%{
        box-shadow: inset 0rem 0rem 0rem 0.1rem #17E1E6, 0rem 0rem 1.5rem 0rem #17E1E6;
        transform: rotate(135deg) translate(100px,100px);
      }
    }
    @keyframes four {
      0%{
        transform: rotate(180deg) translate(0,0);
      }
      50%{
        box-shadow: inset 0rem 0rem 0rem 0.1rem #17E1E6, 0rem 0rem 1.5rem 0rem #17E1E6;
        transform: rotate(180deg) translate(100px,100px);
      }
    }
    @keyframes five {
      0%{
        transform: rotate(225deg) translate(0,0);
      }
      50%{
        box-shadow: inset 0rem 0rem 0rem 0.1rem #17E1E6, 0rem 0rem 1.5rem 0rem #17E1E6;
        transform: rotate(225deg) translate(100px,100px);
      }
    }
    @keyframes six {
      0%{
        transform: rotate(270deg) translate(0,0);
      }
      50%{
        box-shadow: inset 0rem 0rem 0rem 0.1rem #17E1E6, 0rem 0rem 1.5rem 0rem #17E1E6;
        transform: rotate(270deg) translate(100px,100px);
      }
    }
    @keyframes seven {
      0%{
        transform: rotate(315deg) translate(0,0);
      }
      50%{
        box-shadow: inset 0rem 0rem 0rem 0.1rem #17E1E6, 0rem 0rem 1.5rem 0rem #17E1E6;
        transform: rotate(315deg) translate(100px,100px);
      }
    }
    @keyframes eigh {
      0%{
        transform: rotate(360deg) translate(0,0);
      }
      50%{
        box-shadow: inset 0rem 0rem 0rem 0.1rem #17E1E6, 0rem 0rem 1.5rem 0rem #17E1E6;
        transform: rotate(360deg) translate(100px,100px);
      }
    }