css3 跳动小球 张鑫旭

张鑫旭是众所周知的CSS大牛，他在博客文章中分享了许多CSS技巧，其中包括使用CSS3实现跳动小球效果。

.ball {
    width: 50px;
    height: 50px;
    background-color: #F44336;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -25px;
    animation: jump 0.5s ease-in-out infinite;
}
@keyframes jump {
0% {
     transform: translateY(0);
 }
50% {
 transform: translateY(-40px) }
100% {
     transform: translateY(0);
 }
}
    

在这段代码中，我们创建了一个名为“ball”的CSS类，它将成为我们的小球元素的样式。我们将其宽度、高度、背景颜色、边框半径和位置设置为相应的值，使其位于页面中心。

我们还创建了一个名为“jump”的CSS动画，并将其应用于小球元素。该动画有三个关键帧：在0%、50%和100%的时间点。在0%时间点和100%时间点，小球元素的Y轴坐标是0。在50%时间点，我们通过将其Y轴坐标设置为-40px来使小球往上跳。

最后，我们将动画的持续时间设置为0.5秒，并设置其缓动函数为“ease-in-out”，使其跳动效果更为自然。我们还将动画的重复次数设置为无限次，以使小球一直跳动。

通过这段代码，我们可以使用CSS3实现一个简单而有趣的跳动小球效果，不仅可以增加页面的趣味性，还能提高用户的互动体验。感谢张鑫旭大牛的分享，我们可以通过他的教程学习到更多CSS技巧。

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