在本文中,您将学习使用简单的 HTML 和 CSS实现 Jumping Texts 动画效果。 HTML 用于创建页面结构,CSS 用于设置样式。
HTML 代码:在本节中,我们将设计主体的基本结构。
Text Jumping effect
G
e
e
k
s
f
o
r
G
e
e
k
s
CSS 代码:在本节中,我们将使用一些 CSS 属性来设计Jumping 文本。
CSS text-shadow属性用于为文本创建阴影。它接受以逗号分隔的阴影列表。该列表将应用于文本的装饰。元素的 X 和 Y 偏移的某种组合描述了每个阴影。我们使用@keyframes作为动画代码。动画是通过逐渐从一组 CSS 更改为另一组 CSS 来创建的。所有样式的变化以百分比形式发生,或者使用关键字“from”和“to”发生样式变化,与0%和100%相同。 CSS 集可以多次更改。
CSS代码:
完整代码:是以上两个代码段的组合。
Text Jumping effect
G
e
e
k
s
f
o
r
G
e
e
k
s
输出: