master

分支 (1)

管理

管理

master

datanews
/
animate-2.html

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>animation属性演示</title>
  <style>
    @keyframes slide {
      from {
        left: 0;
        top: 0;
      }

      50% {
        left: 50%;
        top: 50%;
      }

      70% {
        left: 20%;
        top: 50%;
      }


      to {
        left: calc(100% - 50px);
        top: 0;
      }
    }

    .stage {
      background: #ccc;
      border-radius: 6px;
      height: 150px;
      position: relative;
      width: 500px;
    }

    .stage:hover .ball {
      animation: slide 1s linear;
    }

    .ball {
      background: #2db34a;
      border-radius: 50%;
      height: 50px;
      position: absolute;
      width: 50px;
      margin: 0;
    }

  </style>
</head>

<body>
  <div class="stage">
    <figure class="ball"></figure>
  </div>
</body>

</html>