文章目录
效果展示
代码实现
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>一颗不甘坠落的流星</title></head><style type="text/css">#mask {display: flex;justify-content: center;align-items: center;height: 100vh;background-color: black;}#text {color: greenyellow;}@keyframes donghua{0 {transform: translateY(0px);}20% {transform: translateY(-20px);}40%, 100% {transform: translateY(0px);}}#text span{display: inline-block;animation: donghua 1.5s ease-in-out infinite;animation-delay: calc(.1s*var(--i));}</style><body><div id="mask"><div id="text"><span style="--i:1">原</span><span style="--i:2">神</span><span style="--i:3">启</span><span style="--i:4">动</span><span style="--i:5">中</span><span style="--i:6">.</span><span style="--i:7">.</span><span style="--i:8">.</span></div></div></body><script type="text/javascript"></script></html>