c3

最新推荐文章于 2024-07-18 17:34:14 发布

姜园J

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量151

点赞数 2

文章标签： css css3 html

本文链接：https://blog.csdn.net/2401_82679799/article/details/139110281

版权

蓝鱼在X轴移动黄🐟在X轴、Y轴移动

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    body {
      background-color: lightblue;
    }

    .fishbox {
      width: 200px;
      height: 200px;
      /*background-color: rgba(0,0,0,0.4);*/
      position: absolute;
      left: 0;
      top: 0;
      animation: run 20s linear infinite;
      animation-direction: normal;
    }

    .fish {
      width: 174px;
      height: 126px;
      position: absolute;
      left: 35%;
      top: 0;
      background: url(./images/fish8.png) no-repeat left top;
      animation: active1 0.8s steps(8) infinite;

    }

    .sharkbox {
      width: 509px;
      height: 270px;
      animation: run2 20s linear infinite;
    }

    .shark {
      width: 509px;
      height: 270px;
      background: url(./images/shark1.png) no-repeat;
      animation: active2 1s steps(8) infinite;
    }

    @keyframes active1 {
      0% {

      }
      100% {
        background-position: left -1008px;
      }
    }

    @keyframes active2 {
      0% {

      }
      100% {
        background-position: left -2160px;
      }
    }

    @keyframes run {
      0% {

      }

      15% {
        transform: translate(600px, 0px) rotate(45deg);
      }

      50% {
        transform: translate(600px, 350px) rotate(135deg);
      }

      75% {
        transform: translate(50px, 300px) rotate(235deg);
      }

      100% {
        transform: translate(0px, 0px) rotate(360deg);
      }
    }

    @keyframes run2 {
      0% {
        transform: translateX(-600px);
      }

      100% {
        transform: translateX(2000px);
      }
    }
  </style>
</head>
<body>
<div class="fishbox">
  <div class="fish"></div>
</div>
<div class="sharkbox">
  <div class="shark"></div>
</div>


</body>
</html>