通过CSS数学函数实现动画特效(3)

.lists { .list { &-item { $item-count: 40; $offset: pi() * 0.5; --wave-length: 21vw; @for $i from 1 through $item-count { &:nth-child(#{$i}) { --i: #{$i}; $ratio: ($i - 1) / ($item-count - 1); $angle-unit: pi() * $ratio; $wave: cos($angle-unit + $offset); --single-wave-length: calc(#{$wave} * var(--wave-length)); --n-single-wave-length: calc(var(--single-wave-length) * -1); } } transform: translateY(var(--n-single-wave-length)); } } }

波动动画

对每个小圆点应用上下平移动画，平移的距离就是余弦的波动距离

.lists { .list { &-item { --t: 2s; animation: wave var(--t) infinite ease-in-out alternate; } } } @keyframes wave { from { transform: translateY(var(--n-single-wave-length)); } to { transform: translateY(var(--single-wave-length)); } }

交错动画

跟上面一个套路，计算从中间开始的 delay，再应用到动画上即可

.lists { .list { &-item { --n: #{$item-count + 1}; --m: #{middle(var(--n))}; --i-m-dist: #{dist-1d(var(--i), var(--m))}; --ratio: calc(var(--i-m-dist) / var(--m)); --square: calc(var(--ratio) * var(--ratio)); --delay: calc( calc(var(--square) + var(--basic-delay-ratio) + 1) * var(--t) ); --n-delay: calc(var(--delay) * -1); animation-delay: var(--n-delay); } } }

地址：Rainbow Sine

到此这篇关于通过CSS数学函数实现动画特效的文章就介绍到这了,更多相关CSS实现动画特效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章: