您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本文将为大家详细介绍“CSS怎么实现心形加载的动画”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“CSS怎么实现心形加载的动画”能够给你意想不到的收获,请大家跟着小编的思路慢慢深入,具体内容如下,一起去收获新知识吧。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/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); } } </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怎么实现心形加载的动画”这一关键问题有了从实践层面最深刻的体会,具体使用情况还需要大家自己动手实践使用过才能领会,如果想阅读更多相关内容的文章,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。