[分享]css3图片上下跳动

CSS3是一种强大的前端网页设计语言，它可以实现很多炫酷的效果。在网页制作中常常需要将图片或文字上下跳动，那么就使用CSS3的动画效果来实现吧。/ 使用CSS3关键帧动画来实现图片上下跳动的效果 / ...

CSS3是一种强大的前端网页设计语言，它可以实现很多炫酷的效果。在网页制作中常常需要将图片或文字上下跳动，那么就使用CSS3的动画效果来实现吧。

/* 使用CSS3关键帧动画来实现图片上下跳动的效果 */
@keyframes jump {
    0% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0); }
}

/* 将动画应用到图片的class中 */
.img-jump {
    animation: jump 1s ease-in-out infinite;
} 

代码解释：

上面代码是在CSS3中定义一段关键帧动画，使用@keyframes定义动画名称jump，在0%时图片不做任何改变，到50%时向上移动5px，到100%时回到初始位置。

接下来使用.img-jump选择器将动画应用到需要上下跳动的图片中，使用animation属性，动画名称为jump，时间为1秒，动画速度为ease-in-out，在应用动画后设置动画循环进行。

要让文字上下跳动，只需要在同样的方式下，将对应的文字元素替换为图片即可。

总之，CSS3是一个非常强大的网页设计语言，使用它可以实现更多更炫酷的效果。学习和掌握CSS3，可以让你的网页设计更加丰富和生动。