css3图片上下浮动

CSS3提供了很多有趣又炫酷的效果，其中图片上下浮动也是其中的一种。通过CSS的transition和position属性，我们可以轻松实现这个效果。

/* HTML *//* CSS */img {
    position: relative;
    transition: top 0.3s ease-in-out;
}
img:hover {
    top: -5px;
}

以上代码中，我们首先将图片的position属性设置为relative，使它相对于原来的位置移动。然后为图片设置transition属性，使它的上下移动有一定的缓动效果。

当鼠标悬停在图片上时，我们就将图片的top属性设置为负值，让它向上移动。因为我们设置了transition属性，所以图片的移动会有一个平滑的过渡效果。

除了上面这种“悬停移动”的效果，我们还可以通过CSS3中的animation属性来实现图片不停的上下浮动，给人一种飘荡的感觉。

/* HTML *//* CSS */.floating {
    position: relative;
    animation: float 3s ease-in-out infinite;
}
@keyframes float {
0% {
    top: 0;
}
50% {
    top: -5px;
}
100% {
    top: 0;
}
}
    

以上代码中，我们为图片设置了一个名为“floating”的class，并在CSS中定义了一个名为“float”的动画。该动画在3秒内循环不断地播放。

在“float”动画中，我们分别定义了图片top属性在不同时间段内的取值。当动画播放时，图片会按照定义的取值在上下方向上移动，从而形成了图片的浮动效果。

总的来说，CSS3为我们提供了很多有趣又实用的效果，让我们在设计网页时更加丰富多彩。而图片上下浮动效果则是其中的一种，简单易学，而且可以让网页显得更加活泼有趣。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！