今天看到一个案例，实现文字的动态跳跃，是用CSS3写的，其中用到了animation属性，还学习了一个新属性box-reflect，不过写的时候，在谷歌浏览器中需要用-webkit-box-reflect，可以实现文字的倒影效果，不由得感慨css的功能越来越强大了。
效果如下：
使用变量的用法我平常用的不多，用变量代替可以使css代码更简洁，值得学习。
我做了一下测试，发现倒影的颜色是由span标记里的颜色决定的，倒影-webkit-box-reflect里设置的颜色不起什么作用。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>动画、倒影、变量</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex; /*弹性布局，子元素可以水平垂直都居中*/
justify-content: center;
align-items: center;
background-color: #23C6D9;
}
.wave {
position: relative;
-webkit-box-reflect: below -12px linear-gradient(transparent, red);
}
.wave span {
position: relative;
display: inline-block;
color: #fff;
font-size: 50px;
text-transform: uppercase;
letter-spacing: 8px;
animation: wavy 1s ease-in-out infinite;
/* 通过var函数调用自定义属性--i，在计算出动画延迟时间 */
animation-delay: calc(0.1s * var(--i));
}
/* 定义动画 */
@keyframes wavy {
0% {
transform: translateY(0);
}
20% {
transform: translateY(-30px);
}
50%,100% {
transform: translateY(0);
}
}
</style>
</head>
<body>
<div class="wave">
<span style="--i:1;">w</span>
<span style="--i:2;">a</span>
<span style="--i:3;">i</span>
<span style="--i:4;">t</span>
<span style="--i:5;">i</span>
<span style="--i:6;">n</span>
<span style="--i:7;">g</span>
<span style="--i:8;">.</span>
<span style="--i:9;">.</span>
<span style="--i:10;">.</span>
</div>
</body>
</html>