本篇文章给大家介绍一下纯css实现心形加载动画的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
废话不多说上代码，代码很简答，研究一下就明白了，有不明白的可以问我。
.heart-loading { margin-top: 120px; width: 200px; height: 200px; } ul { list-style: none; display: flex; justify-content: space-between; width: 150px; height: 10px; /* 做心形和条形想法是一样的,但是每条高度是不一样的 */ } li { --count: 9; --rgb: calc(var(--index) / var(--count) * .5turn); /* 不能把这个延时设置的太慢.太慢就看不出来是心形了,同时调整延时和动画时长即可 */ --time: calc((var(--index) - 1) * 150ms); border-radius: 5px; width: 10px; height: 10px; background-color: #003BB3; /* 利用fiter函数可以让颜色渐变会非常漂亮 */ filter: hue-rotate(var(--rgb)); /* 下边这个是动画时长 */ animation-duration: 2.5s; animation-delay: var(--time); animation-iteration-count: infinite; } .line-1, .line-9 { animation-name: line-move-1; } .line-2, .line-8 { animation-name: line-move-2; } .line-3, .line-7 { animation-name: line-move-3; } .line-4, .line-6 { animation-name: line-move-4; } .line-5 { animation-name: line-move-5; } /* 对称的动画要相同高度,这样看出心形了 */ @keyframes line-move-1 { 0%, 10%, 90%, 100% { height: 10px; } 45%, 55% { height: 30px; transform: translate3d(0, -15px, 0); } } @keyframes line-move-2 { 0%, 10%, 90%, 100% { height: 10px; } 45%, 55% { height: 60px; transform: translate3d(0, -30px, 0); } } @keyframes line-move-3 { 0%, 10%, 90%, 100% { height: 10px; } 45%, 55% { height: 80px; transform: translate3d(0, -40px, 0); } } @keyframes line-move-4 { 0%, 10%, 90%, 100% { height: 10px; } 45%, 55% { height: 90px; transform: translate3d(0, -30px, 0); } } @keyframes line-move-5 { 0%, 10%, 90%, 100% { height: 10px; } 45%, 55% { height: 90px; transform: translate3d(0, -20px, 0); } }
更多编程相关知识，请访问：编程教学！！
立即学习“前端免费学习笔记（深入）”；
以上就是纯CSS实现心形加载动画（附源码）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1620098.html
微信扫一扫 
支付宝扫一扫 
