本文主要是介绍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);}
}
欢迎关注我的微信公众号：
这篇关于CSS实现网页花瓣loading效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
