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);}
}

欢迎关注我的微信公众号：