下面记录一个利用纯CSS样式代码实现一个爱心形状的动态加载条，用到了CSS中的动画效果与伪元素样式，有一定的参考价值。感兴趣的小伙伴，不妨测试一下。

纯CSS实现心形加载动画效果

1、动画效果

2、示例代码

<style> #he{ display: flex; justify-content: center; align-items: center; height: 200px; background-color: #ffffff; margin-top: 150px; } ul{ padding: 0; margin: 0; } li{ float: left; width: 20px; height: 20px; border-radius: 20px; margin-right: 10px; list-style: none; } li:nth-child(1){ background-color: #f62e74; animation: love1 4s infinite; } li:nth-child(2){ background-color: #f45330; animation: love2 4s infinite; animation-delay: 0.15s; } li:nth-child(3){ background-color: #ffc883; animation: love3 4s infinite; animation-delay: 0.3s; } li:nth-child(4){ background-color: #30d268; animation: love4 4s infinite; animation-delay: 0.45s; } li:nth-child(5){ background-color: #006cb4; animation: love5 4s infinite; animation-delay: 0.6s; } li:nth-child(6){ background-color: #784697; animation: love4 4s infinite; animation-delay: 0.75s; } li:nth-child(7){ background-color: #ffc883; animation: love3 4s infinite; animation-delay: 0.9s; } li:nth-child(8){ background-color: #f45330; animation: love2 4s infinite; animation-delay: 1.05s; } li:nth-child(9){ background-color: #f62e74; animation: love1 4s infinite; animation-delay: 1.2s; } @keyframes love1{ 30%,50%{height: 40px; transform: translateY(-20px);} 75%,100%{height: 20px; transform: translateY(0);} } @keyframes love2{ 30%,50%{height: 95px; transform: translateY(-42.5px);} 75%,100%{height: 20px; transform: translateY(0);} } @keyframes love3{ 30%,50%{height: 140px; transform: translateY(-60px);} 75%,100%{height: 20px; transform: translateY(0);} } @keyframes love4{ 30%,50%{height: 145px; transform: translateY(-40px);} 75%,100%{height: 20px; transform: translateY(0);} } @keyframes love5{ 30%,50%{height: 155px; transform: translateY(-20px);} 75%,100%{height: 20px; transform: translateY(0);} } p{ text-align: center; } </style> <div id="he"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <p>飞鸟慕鱼博客</p>复制

分享到：