css3 上下浮动效果 |css的inline-block

/*HTML*/
<div class="float">
<h3>这是一个上下浮动的标题</h3>
<p>这是一个上下浮动的内容，使用CSS3的animation实现</p>
</div>
/*CSS*/
.float {
animation: float .5s ease-in-out infinite;
}
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}

上述代码是实现上下浮动效果的关键，大家可以看到使用了CSS3的animation属性和@keyframes关键字，还使用了transform属性的translateY函数。

其中，animation属性设置了动画效果的名称、持续时间、时间曲线和执行次数，而@keyframes是定义动画效果的关键字，通过设置不同的帧来实现动画效果。

在样式中，通过translateY来实现元素在y轴上的移动，负值表示向上移动，正值表示向下移动。

在上述代码中，大家定义了三个关键帧，分别表示初始状态、中间状态和结束状态，通过将元素在y轴上移动10像素来实现上下浮动的效果，再通过设置infinite属性，使动画永久执行。

上下浮动效果可以应用在很多场景中，比如网页的标题、滚动提示等，通过使用CSS3的animation和@keyframes属性，可以轻松实现这一效果。