原文地址:https://segmentfault.com/a/1190000015305861
感想:关于两侧动画不在同一水平线上的原因是因为设置其多余高,旋转180度呈现的。
HTML code:
<div class="loader"> <span>l</span> <span>o</span> <span>a</span> <span>d</span> <span>i</span> <span>n</span> <span>g</span> </div>
CSS code:
html, body, div{ margin: 0; padding: 0; /* 设置的宽高包括内外边距、边框、内容 */ box-sizing: border-box; } /* body子元素水平垂直居中 */ body{ height: 100vh; display: flex; justify-content: center; align-items: center; background-color: black; overflow: hidden; } /* 设置.loader容器样式 */ .loader{ position: relative; width: 40em; height: 3em; /* border: 1px solid white; */ color: dodgerblue; font-size: 1.5em; font-family: sans-serif; text-transform: uppercase; animation: change-color 10s linear infinite; } @keyframes change-color { 0% { color: dodgerblue; } 20% { color: hotpink; } 40% { color: gold; } 60% { color: mediumpurple; } 80% { color: lightgreen; } 100% { color: dodgerblue; } } /* 给文字增加渐隐渐显动画 */ .loader span{ position: absolute; height: 3em; /* 有边框可以看出两侧如何旋转的 border: 1px solid white; */ animation: moving 2s linear infinite; /* 设置动画延时,增强动画效果 */ animation-delay: calc((var(--n) - 10) * 0.25s); /* 上面0.25没有带单位s导致元素叠加,编码不认真 */ } .loader span:nth-child(1) { --n: 1; } .loader span:nth-child(2) { --n: 2; } .loader span:nth-child(3) { --n: 3; } .loader span:nth-child(4) { --n: 4; } .loader span:nth-child(5) { --n: 5; } .loader span:nth-child(6) { --n: 6; } .loader span:nth-child(7) { --n: 7; } @keyframes moving{ 0%{ filter: opacity(0); /* 旋转 ,因为设置其多余高,所以旋转180度就出现两侧的不同水平线的动画*/ transform: rotate(-180deg); /* 移动 */ left: 100%; } 33% { filter: opacity(1); transform: rotate(0deg); left: 60%; } 66% { filter: opacity(1); transform: rotate(0deg); left: 40%; } 100% { filter: opacity(0); transform: rotate(-180deg); left: 0; } }