纯CSS实现心形加载动画(附源码)
导读:收集整理的这篇文章主要介绍了纯CSS实现心形加载动画(附源码),觉得挺不错的,现在分享给大家,也给大家做个参考。本篇文章给大家介绍一下纯CSS实现心形加载动画的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。废话不多说...
收集整理的这篇文章主要介绍了纯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实现心形加载动画(附源码)的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 纯CSS实现心形加载动画(附源码)
本文地址: https://pptw.com/jishu/589297.html