html代码 小球上下波动

HTML代码可以实现很多有趣的效果，比如让小球上下波动。以下是一个简单的例子：

!DOCTYPE html>
    html>
    head>
      style>
    #ball {
          position: relative;
          top: 0;
          animation: up-down 1s infinite;
    }
    @keyframes up-down {
      0% {
            top: 0;
      }
      50% {
            top: 50px;
      }
      100% {
            top: 0;
      }
    }
      /style>
    /head>
    body>
      div id="ball">
    /div>
    /body>
    /html>
    

上面的代码中，使用了CSS动画，并定义了一个名为up-down的动画，在50%时，top属性为50px，使小球向下移动，其他时间top属性为0，使小球回到原来位置。在小球的div标签上指定了id为ball，使用position:relative属性使其相对于原来的位置上下移动。

通过以上的代码，我们可以实现一个很简单的小球上下波动的效果，在实际应用中，也可以根据需求对代码进行修改和优化，让效果更加酷炫。

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