CSS动画实战：创建一个太极Loading图

    动画分析
    首先通过效果对动画执行进行一下分析：
    边框的四条边进行按顺序动画加载 。
    矩形边框变为圆行边框。
    太极图内部图案渐渐出现。
    太极图旋转。
    整个动画逆序执行。
    针对上面的1效果是需要思考一下的，其他都比较容易实现。5效果只需设置属性animation-direction: alternate即可，整体动画加入animation-iteration-count: infinite来保证无限循环。
    静态效果实现

    首先将静态效果做出来。

  北京韩式注射隆鼻http://www.ahzdzs.com/

    html结构：
    <div id="loader">
    <div class="logo">
    <div class="left"></div>
    <div class="right"></div>
    </div>
    <p>Loading...</p>
    </div>
    CSS（LESS）部分：
    @border-width:2px;
    @loader-width:150px;
    @loader-insider-width:@loader-width * 0.15;
    @animate-time:4s;
    *{
    margin: 0;
    padding: 0;
    border: 0;
    }
    html, body{
    width: 100%;
    height: 100%;
    }
    #loader{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    p {
    padding: 1.5em;
    font-family: Arial;
    }
    .logo{
    width: @loader-width;
    height: @loader-width;
    position: relative;
    &:before{
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    border-color: transparent;
    border-width: @border-width;
    border-style: solid;
    border-top-color: #000;
    border-right-color: #000;
    width: 100%;
    height: 100%;
    }
    &:after{
    position: absolute;
    content: '';
    bottom: -2 * @border-width;
    right: -2 * @border-width;
    border-color: transparent;
    border-width: @border-width;
    border-style: solid;
    border-bottom-color: #000;
    border-left-color: #000;
    width: 100%;
    height: 100%;
    }
    .left{
    position: absolute;
    width: 50%;
    height: 100%;
    top: @border-width;
    right: 50%;
    background-color: #000;
    border-top-left-radius: 100% 50%;
    border-bottom-left-radius: 100% 50%;
    &:before{
    position: absolute;
    content: '';
    width: 100%;
    height: 50%;
    bottom: 0;
    left: 50%;
    border-radius: 50%;
    background-color: #000;
    }
    &:after{
    position: absolute;
    content: '';
    width: @loader-insider-width;
    height: @loader-insider-width;
    background-color: #fff;
    bottom: ~'calc(25% - @{loader-insider-width} / 2)';
    left: ~'calc(100% - @{loader-insider-width} / 2)';
    border-radius: 50%;
    }
    }
    .right{
    position: absolute;
    width: 50%;
    height: 100%;
    top: @border-width;
    left: 50%;
    border-top-right-radius: 100% 50%;
    border-bottom-right-radius: 100% 50%;
    &:before{
    position: absolute;
    content: '';
    width: 100%;
    height: 50%;
    top: 0;
    right: 50%;
    border-radius: 50%;
    background-color: #fff;
    }
    &:after{
    position: absolute;
    content: '';
    width: @loader-insider-width;
    height: @loader-insider-width;
    background-color: #000;
    top: ~'calc(25% - @{loader-insider-width} / 2)';
    right: ~'calc(100% - @{loader-insider-width} / 2)';
    border-radius: 50%;
    }
    }
    }
    }