废话不多说上代码，代码很简答，研究一sit的过去式下就明白了，有不明白的可以问我。
<!doctype html><html> <head> <meta chart="utf-8"> <title></title> <style type="text/css"> .heart-loading { margin-top: 120px; width: 200px; height: 200px; } ul { list-style: n清明节作文one; 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); } } @keyfr欧州人体ames line-move-5 { 0%, 10%, 90%, 100% { height: 10px; } 45%, 55% { height: 90px; transform: translate3d(0, -20px, 0); } } </style> </head> <body> <div class="heart-loading"> <ul> <li class="line-1" style="--index: 1"></li> <li class="line-2" style="--index: 2"></li> <li class="line-3" style="--index: 3"></li> <li class="line-4" style="--index: 4"></li> <li class="line-5" style="--index: 5"></li> <li class="line-6" style="--index: 6"></li> <li class="line-7" style="--index: 7"></li> <li class="line-8" style="--index: 8"></li> <li class="line-9" style="--index: 9"></li> </ul> </div> </body></html>到此这篇关于css心形加载的动画源码的实现的文章就介绍到这了,更多相关css 心形加载动画内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章，希望大家以后多多支持www.887551.com！
本文发布于:2023-04-03 19:22:34，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/3fdd5f87fd803b83679bb480d292c317.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：CSS心形加载的动画源码的实现.doc
本文 PDF 下载地址：CSS心形加载的动画源码的实现.pdf
| 留言与评论（共有 0 条评论） |
