如何解决试图使文本移动一波,但它不起作用
我正在尝试显示“嘿!”的文字。以一种波浪形的方式移动,类似于您在RPG中可能看到的情况。这是我正在使用的CSS:
.wiggly span {
font-family: 'Montserrat',sans-serif;
font-size: 90px;
font-weight: bold;
-webkit-animation: wiggle 1.5s ease-in-out infinite;
-webkit-animation-delay: calc(0.1s * var(--i));
}
@-webkit-keyframes wiggle {
0% {
transform: translateY(0);
}
20% {
transform: translateY(-10px);
}
40% {
transform: translateY(10px);
}
60% {
transform: translateY(10px);
}
80% {
transform: translateY(-10px);
}
}
<div class="wiggly">
<span style="--i:1;">H</span>
<span style="--i:2;">e</span>
<span style="--i:3;">y</span>
<span style="--i:4;"> </span>
<span style="--i:5;">t</span>
<span style="--i:6;">h</span>
<span style="--i:7;">e</span>
<span style="--i:8;">r</span>
<span style="--i:9;">e</span>
<span style="--i:10;">!</span>
</div>
我改编了this代码示例和this youtube视频的代码。知道我哪里出错了吗?谢谢!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。