文章最后更新时间:2024年04月13日
前言
本文是笔者写CSS时常用的套路。不论效果再怎么华丽,万变不离其宗。
1、交错动画
有时候,我们需要给多个元素添加同一个动画,播放后,不难发现它们会一起运动,一起结束,这样就会显得很平淡无奇。那么如何将动画变得稍微有趣一点呢?很简单,既然它们都是同一时刻开始运动的,那么让它们不在同一时刻运动不就可以了吗。如何让它们不在同一时刻运动呢?注意到CSS动画有延迟(delay
)这一属性。举个栗子,比如有十个元素播放十个动画,将第二个元素的动画播放时间设定为比第一个元素晚0.5秒(也就是将延迟设为0.5秒),其他元素以此类推,这样它们就会错开来,形成一种独特的视觉效果。
这就是所谓的交错动画:通过设置不同的延迟时间,达到动画交错播放的效果。
HTML:
<div class="loading"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div>
CSS:
body { display: flex; height: 100vh; justify-content: center; align-items: center; background: #222; } .loading { $colors: #7ef9ff, #89cff0, #4682b4, #0f52ba, #000080; display: flex; .dot { position: relative; width: 2em; height: 2em; margin: 0.8em; border-radius: 50%; &::before { position: absolute; content: ""; width: 100%; height: 100%; background: inherit; border-radius: inherit; animation: wave 2s ease-out infinite; } @for $i from 1 through 5 { &:nth-child(#{$i}) { background: nth($colors, $i); &::before { animation-delay: $i * 0.2s; } } } } } @keyframes wave { 50%, 75% { transform: scale(2.5); } 80%, 100% { opacity: 0; } }
如果需要用JS分割文本,请查看以下文章:
文章版权声明:除非注明,否则均为折腾博客原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...