I saw a case today to realize the dynamic jumping of text. It was written in CSS3, which used the animation attribute and learned a new attribute box-reflect. However, when writing, you need to use -webkit-box in Google Chrome -reflect, which can realize the reflection effect of text, and I can't help feeling that the function of css is becoming more and more powerful.
The effect is as follows:
I don’t usually use variables much, and using variables instead can make the css code more concise and worth learning.
I did a test and found that the color of the reflection is determined by the color in the span tag, and the color set in reflection-webkit-box-reflect has no effect.
<!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>