单个div+css实现伐木机器人效果代码-html代码-BFW代码库

代码语言：html

代码描述：采用单个div+css实现的伐木机器人手中拿着斧头效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
          min-height: 400px;
          height: 100vh;
          position: relative;
          background-color: #90ee90;
          text-align: center;
        }
        div {
          position: absolute;
          left: 50%;
          top: 50%;
        }
        div:before,
        div:after {
          display: block;
          content: '';
          position: absolute;
        }
        @media (max-width: 400px) {
          div {
            transform: scale(0.8);
          }
        }
        #squeak {
          font-size: 10px;
          width: 20em;
          height: 35em;
          margin-left: -10em;
          margin-top: -17.5em;
          background-repeat: no-repeat;
          background-image: linear-gradient(to bottom, #191970 0.2em, rgba(255,255,255,0) 0.2em, rgba(255,255,255,0) calc(100% - 0.2em), #191970 calc(100% - 0.2em)), linear-gradient(to right, #191970 0.2em, #fff 0.2em, #fff calc(100% - 0.2em), #191970 calc(100% - 0.2em)), linear-gradient(to bottom, #191970 0.2em, rgba(255,255,255,0) 0.2em, rgba(255,255,255,0) calc(100% - 0.2em), #191970 calc(100% - 0.2em)), linear-gradient(to right, #191970 0.2em, #fff 0.2em, #fff calc(100% - 0.2em), #191970 calc(100% - 0.2em)), linear-gradient(#191970, #191970), linear-gradient(#191970, #191970), linear-gradient(#191970, #191970), linear-gradient(#191970, #191970), linear-gradient(#191970, #191970), linear-gradient(to right, #191970 0.2em, #fff 0.2em, #fff calc(100% - 0.2em), #191970 calc(100% - 0.2em)), linear-gradient(#191970, #191970), radial-gradient(ellipse at 50% 100%, white 50%, #191970 51%, #191970 56%, transparent 57%), radial-gradient(ellipse at 50% 100%, white 50%, #191970 51%, #191970 56%, transparent 57%), linear-gradient(#191970, #191970), linear-gradient(#191970, #191970), linear-gradient(-75deg, #191970 20%, transparent 21%), linear-gradient(-75deg, white 35%, #191970 36%, #191970 38%, transparent 39%), linear-gradient(to right, #191970 0.2em, #fff 0.2em, #fff calc(100% - 0.2em), #191970 calc(100% - 0.2em)), linear-gradient(#191970, #191970), linear-gradient(#191970, #191970), linear-gradient(75deg, #191970 20%, transparent 21%), linear-gradient(75deg, white 35%, #191970 36%, #191970 38%, transparent 39%), linear-gradient(to right, #191970 0.2em, #fff 0.2em, #fff calc(100% - 0.2em), #191970 calc(100% - 0.2em)), linear-gradient(65deg, transparent 40%, #191970 41%, #191970 42.5%, white 43%, white 51%, #191970 51.5%, #191970 53%, transparent 54%), linear-gradient(to right, #191970 0.2em, #fff 0.2em, #fff calc(100% - 0.2em), #191970 calc(100% - 0.2em)), linear-gradient(-65deg, transparent 40%, #191970 41%, #191970 42.5%, white 43%, white 51%, #191970 51.5%, #191970 53%, transparent 54%), linear-gradient(to right, #191970 0.2em, #fff 0.2em, #fff calc(100% - 0.2em), #191970 calc(100% - 0.2em)), linear-gradient(140deg, transparent 30%, #191970 31%, #191970 34%, white 35%, white 40%, #191970 41%, #191970 50%, white 51%), linear-gradient(-140deg, transparent 30.5%, #191970 31%, #191970 34%, white 35%, white 40%, #191970 41%, #191970 60%, white 61%), linear-gradient(#191970, #191970), linear-gradient(to right, #191970 0.2em, #fff 0.2em, #fff calc(100% - 0.2em), #191970 calc(100% - 0.2em));
          background-size: 9em 0.8em, 9em 0.8em, 9em 0.8em, 9em 0.8em, 0.8em 10em, 0.2em 10em, 0.2em 6em, 0.2em 8em, 1.5em 10em, 8em 10em, 16em 0.2em, 6em 2em, 6em 2em, 0.2em 4em, 0.2em 4em, 5em 4em, 5em 6em, 1.5em 50%, 0.2em 4em, 0.2em 4em, 5em 4em, 5em 6em, 1.5em 50%, 6em 6em, 1em 5em, 6em 6em, 1em 5em, 4em 3em, 4em 3em, 1em 4em, 3em 4em;
          background-position: 50% 36%, 50% 36%, 50% 64%, 50% 64%, 35% 50%, 9em 50%, 11.4em 43%, 11.7em 48%, 65% 50%, 50% 50%, 50% 100%, 4.5em 100%, right 4.5em top 100%, 7.3em 73%, 7.6em 68%, 3.1em 100%, 3em 100%, 7em 100%, right 7.3em top 73%, right 7.6em top 68%, right 3.1em top 100%, right 3em top 100%, right 7em top 100%, right 1.9em top 45%, right 3.2em top 65%, 1.9em 45%, 3.2em 65%, 6em 32.5%, right 6em top 32.5%, right 9em top 25%, 50% 25%;
        }
        #squeak:before {
          width: 0.6em;
          height: 0.6em;
          left: 9.5em;
          top: 40.2%;
          border-radius: 50%;
          background-color: #191970;
          box-shadow: 0 2em 0 #191970, 0 4em 0 #191970, 0 6em 0 #191970, 6.7em 5.3em 0 0.2em white, 6.4em 5.1em 0 0.2em #191970, 6.4em 5.1em 0 0.6em white, 6.4em 5.1em 0 0.8em #191970, -6.5em 5.3em 0 0.2em white, -6.2em 5.1em 0 0.2em #191970, -6.2em 5.1em .........完整代码请登录后点击上方下载按钮下载查看