奔跑的熊大(案例)内附图片素材-CFANZ编程社区

奔跑的熊大(案例)内附图片素材

秀儿2020 2022-04-18 阅读 247

此案例使用了 steps() 步长来显示熊的状态，常规的ease等动画速度，达不到我们需要的效果，因此steps()更契合，而两张背景使用linear来匀速运动来保证速度的一致。

具体代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>奔跑的熊</title>
    <style>
      .bear {
        position: absolute;
        bottom: 15px;
        width: 200px;
        height: 100px;
        background: url(media/bear.png) no-repeat;
        /* 元素可以添加多个动画，用逗号分割即可 */
        animation: bear 1s steps(8) infinite, move 3s linear forwards;
      }
      .bg2 {
        position: absolute;
        width: 100%;
        height: 500px;
        /* 注意这里不要写no-repeat 否则图片动画结束之后会有空白 */
        background: url(media/bg2.png);
        animation: bg-move 25s linear infinite;
      }
      .bg1 {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 336px;
        /* 注意这里不要写no-repeat 否则图片动画结束之后会有空白 */
        background: url(media/bg1.png);
        animation: bg-move 25s linear infinite;
      }
      /* 让熊动起来 */
      @keyframes bear {
        0% {
          background-position: 0 0;
        }
        100% {
          background-position: -1600px 0;
        }
      }
      /* 熊跑到中间 */
      @keyframes move {
        0% {
          left: 0;
        }
        100% {
          left: 50%;
          /* margin-left: -100px; */
          /* 往左移动自身宽度的一半 */
          transform: translateX(-50%);
        }
      }
      @keyframes bg-move {
        0% {
          background-position: 0 0;
        }
        100% {
          background-position: -3840px 0;
        }
      }
    </style>
  </head>
  <body>
    <div class="bg2">
      <div class="bg1">
        <div class="bear"></div>
      </div>
    </div>
  </body>
</html>

图片素材：

至于具体效果，感兴趣的朋友们可以去试一试，也可以在此基础上加入一些自己的小创意。

0 条评论