Vi un caso hoy para realizar el salto dinámico de texto. Fue escrito en CSS3, que usó el atributo de animación y aprendió un nuevo atributo box-reflect. Sin embargo, al escribir, debe usar -webkit-box en Google Chrome - reflect, que puede realizar el efecto de reflejo del texto, y no puedo evitar sentir que la función de css se está volviendo cada vez más poderosa.
El efecto es el siguiente:
no suelo usar mucho las variables, y usar variables en su lugar puede hacer que el código css sea más conciso y que valga la pena aprenderlo.
Hice una prueba y descubrí que el color del reflejo está determinado por el color en la etiqueta de intervalo, y el conjunto de colores en reflection-webkit-box-reflect no tiene ningún efecto.
<!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>