无聊的前端

deaj-c

已于 2024-11-07 14:23:03 修改

阅读量1.8k

点赞数 50

文章标签： html javascript 前端

于 2024-11-07 14:22:37 首次发布

本文链接：https://blog.csdn.net/weixin_43405581/article/details/143593119

版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>火柴人动画</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background-color: #87CEEB; /* 蓝天背景 */
      display: flex;
      justify-content: center;
      align-items: flex-end; /* 靠底部显示 */
      height: 100vh;
      overflow: hidden;
      position: relative;
    }

    /* 绿草地 */
    .grass {
      position: absolute;
      bottom: 0;
      width: 200%; /* 扩大宽度以便滚动 */
      height: 20%;
      background-color: #32CD32; /* 草地的绿色 */
      box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.3);
      animation: grassMove 5s linear infinite;
    }

    /* 太阳 */
    .sun {
      position: absolute;
      top: 10%;
      left: 75%;
      width: 100px;
      height: 100px;
      background-color: #FFD700; /* 太阳黄色 */
      border-radius: 50%;
      box-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
      z-index: -1; /* 太阳在背景中 */
    }

    /* 白云 */
    .cloud {
      position: absolute;
      top: 5%;
      background-color: #FFFFFF;
      border-radius: 50%;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
      animation: cloudMove 10s linear infinite;
    }

    .cloud1 {
      width: 150px;
      height: 60px;
      left: 10%;
      z-index: -1;
    }

    .cloud2 {
      width: 180px;
      height: 80px;
      left: 40%;
      z-index: -1;
    }

    .cloud3 {
      width: 130px;
      height: 50px;
      left: 70%;
      z-index: -1;
    }

    /* 火柴人 */
    .stickman {
      position: absolute;
      width: 50px;
      height: 150px;
      bottom: 10%; /* 向下移动火柴人 */
      z-index: 1; /* 确保火柴人在草地和背景上面 */
    }

    .head {
      position: absolute;
      top: 0;
      left: 50%;
      width: 30px;
      height: 30px;
      background-color: #333;
      border-radius: 50%;
      transform: translateX(-50%);
    }

    .body {
      position: absolute;
      top: 30px;
      left: 50%;
      width: 10px;
      height: 60px;
      background-color: #333;
      transform: translateX(-50%);
    }

    .left-leg, .right-leg {
      position: absolute;
      top: 90px;
      width: 10px;
      height: 50px;
      background-color: #333;
      transform-origin: top;
    }

    .left-leg {
      left: 40%;
      animation: leftLegWalk 0.5s infinite alternate;
    }

    .right-leg {
      left: 50%;
      animation: rightLegWalk 0.5s infinite alternate;
    }

    .left-arm, .right-arm {
      position: absolute;
      top: 50px;
      width: 30px;
      height: 8px;
      background-color: #333;
      transform-origin: left;
    }

    .left-arm {
      left: -30%;
    }

    .right-arm {
      left: 100%;
      transform: translateX(-100%);
    }

    /* 左腿步伐动画 */
    @keyframes leftLegWalk {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(45deg);
      }
    }

    /* 右腿步伐动画 */
    @keyframes rightLegWalk {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(-45deg);
      }
    }

    /* 草地滚动动画 */
    @keyframes grassMove {
      0% {
        left: 0;
      }
      100% {
        left: -100%;
      }
    }

    /* 云朵滚动动画 */
    @keyframes cloudMove {
      0% {
        left: 0;
      }
      100% {
        left: -100%;
      }
    }

  </style>
</head>
<body>
  <div class="sun"></div>
  <div class="cloud cloud1"></div>
  <div class="cloud cloud2"></div>
  <div class="cloud cloud3"></div>
  <div class="grass"></div>

  <div class="stickman">
    <div class="head"></div>
    <div class="body"></div>
    <div class="left-leg"></div>
    <div class="right-leg"></div>
    <div class="left-arm"></div>
    <div class="right-arm"></div>
  </div>

  <script>
    // script.js

    // 简单模拟火柴人走动的步伐
    const leftLeg = document.querySelector('.left-leg');
    const rightLeg = document.querySelector('.right-leg');

    let isWalking = false;

    function toggleWalking() {
      if (!isWalking) {
        leftLeg.style.animationPlayState = 'running';
        rightLeg.style.animationPlayState = 'running';
        isWalking = true;
      } else {
        leftLeg.style.animationPlayState = 'paused';
        rightLeg.style.animationPlayState = 'paused';
        isWalking = false;
      }
    }

    // 让火柴人一直走动
    setInterval(toggleWalking, 1000);
  </script>
</body>
</html>