<span style="--s:1;">l</span>

这里的 --s是自定义属性，后续实行动画时，可通过var函数进行调用，用于打算出动画延迟韶光利用。

CSS干系部分

height: 100vh;

这里的height: 100vh;表示100%窗口（浏览器窗口）高度，而height: 100%;是相对付父元素的高度，当父元素高度未被定义时则height: 100%;不会生效；在实现全屏或类似效果时height: 100vh比较适宜。

html5水波浪HTML5CSS3实现海浪文字后果 Vue.js

display: flex;justify-content: center;align-items: center;

这里利用的是弹性布局，让元素水平垂直居中展示。

-webkit-box-reflect: below -12px linear-gradient(transparent, rgba(0,0,0,0.2));

这里是为笔墨添加倒影效果样式，实现倒影在笔墨下方间隔12个像素线性渐变效果，个中linear-gradient用于创建线性渐变利用。

@keyframes wavyAnimate { 0%{ transform: translate(0); } 25%{ transform: translate(-20px); } 50%, 100%{ transform: translate(0); }}

这里是创建动画并定义关键帧，%：表示动画进度，0%为动画开始，100%为动画结束。
在这两个值之间可以定义任意数量的关键帧，浏览器会根据这些关键帧的样式逐渐过渡。
个中，transform: translate(-20px);是CSS3中的一种变形属性，浸染是通过平移元素的位置，来实现元素的定位和布局。

animation: wavyAnimate 1s ease-in-out infinite;animation-delay: calc(0.1s var(--s));

创建完关键帧动画后，要使其生效，须要将其运用于详细的HTML元素（即定义的span元素），并指定动画的时长和其他参数，这里实现的效果是动画时长为1秒，加速后减速并无限次播放；同时通过var函数调用自定义属性--s打算出每个元素的动画延迟韶光。