css字符动画 |html5 css3 悬浮按钮

html:
<div class="box">
<span>H</span>
<span>E</span>
<span>L</span>
<span>L</span>
<span>O</span>
</div>
css:
.box {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}
.box span {
font-size: 50px;
opacity: 0;
animation: fadeIn 1s ease-in-out forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

以上的代码就是实现一个“HELLO”的动画效果，具体解释如下：

• 首先定义了一个父级元素 .box ，它用于包裹所有的字符元素。
• 然后定义了五个字符元素，使用了 span 标签，分别对应“H”、“E”、“L”、“L”、“O”。
• 在 CSS 样式中，定义了 .box 的布局方式为 flex 布局，使所有字符元素在一个横向居中的容器中。
• 对于每个字符元素，定义了它们的字体大小为 50px ，初始的透明度为 0，使用了动画 fadeIn 实现了透明度从 0 到 1 的渐变过程。
• 最后，在 @keyframes 中定义了动画的具体执行方式，从原始透明度 0 开始，向下移动 50px 后随着透明度的增加完成整个渐变过渡。

这样就实现了一个简单的 CSS 字符动画。如果需要增加更多的动画效果，可通过调整 CSS 样式、修改动画关键帧等方式来实现。