loading窗口动画 web_CSS实现网页花瓣loading效果

最终效果

完整代码：https://github.com/1395204913/CSSDemo/tree/master/petals_loading

主要代码

首先创建父容器load,再创建6个花瓣容器petal

<!-- 父容器 -->
    <div class="load">
        <!-- 六个花瓣 -->
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
    </div>

将父容器绘制成圆形

.load::before{
    content: '';
    display: block;
    width: 100px;
    height: 100px;
    background-color: #fff;
    border-radius: 50%;
    opacity: 0.7;
    background-color: #eb4d4b;
}

绘制6个花瓣

.petal::before{
    content: '';
    display: block;
    width: 60px;
    height: 60px;
    background-color: #fff;
    border-radius: 40px 40px 0 0;
    transform-origin: top center;
    transform:rotateX(-70deg);
    animation: flower 2.5s cubic-bezier(0.5,0,0.5,1) infinite;
}

此时6个花瓣集中于一处，按照一定角度张开

.petal:nth-child(1){
    transform: rotate(0deg);
}
.petal:nth-child(2){
    transform: rotate(60deg);
}
......

添加动画

@keyframes flower{
    0%,100%{
        width: 80px;
        height: 280px;
    }
    40%{
        height: 0;
    }
}
@keyframes load{
    0%{
        transform: rotate(0deg) scale(1);
    }
    50%{
        transform: rotate(360deg) scale(.4);
    }
    100%{
        transform: rotate(720deg) scale(1);
    }
}

公众号：web前端提升大本营