html代码设置动画

HTML是创建网页的标准语言，除了基本设置，它还能设置各种动画效果，使网页看起来更加生动有趣。

  !--html代码-->
      !DOCTYPE html>
      html>
      head>
      style>
  .box {
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
        animation-name: example;
     /*动画名称*/    animation-duration: 3s;
     /*动画持续时间*/    animation-iteration-count: infinite;
 /*动画循环次数，infinite代表无限循环*/  }
  @keyframes example {
    0% {
          background-color: red;
          left: 0px;
          top: 0px;
    }
    100% {
          background-color: blue;
          left: 200px;
          top: 200px;
    }
  }
      /style>
      /head>
      body>
      div class="box">
    /div>
      /body>
      /html>
    

上面的代码创建了一个宽高都为100px的红色正方形，设置了它的位置为相对，然后在样式表里通过@keyframes定义了一个从红变蓝、由上向右下移动的动画效果，最后将这个动画效果命名为example并应用到了刚才创建的div中。

要让生成的动画拥有更多的属性选择，用户可以使用@keyframes，这个标签表示定义关键点、根据时间轴变动属性值的样式表。在HTML中，通常将样式表写在head标签中，在样式表中使用将JavaScript代码嵌入其中。

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