文章目录
效果展示
代码实现
<!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">
<!-- style设置变量 -->
<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>