css布局实现一个放炮的钢铁侠动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css布局实现一个放炮的钢铁侠动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        * {
          box-sizing: border-box;
          position: relative;
        }
        *::after, *::before {
          box-sizing: border-box;
          content: "";
          position: absolute;
        }
        
        body {
          height: 100vh;
          width: 100vw;
          align-items: center;
          background-color: #fefefe;
          display: flex;
          justify-content: center;
          margin: 0;
          overflow: hidden;
        }
        
        .ironman {
          height: 80vmin;
          width: 60vmin;
          align-items: center;
          -webkit-animation: 8.6s ease-in-out infinite levitate;
                  animation: 8.6s ease-in-out infinite levitate;
          border-radius: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
        
        .ears {
          height: 10.5%;
          width: 46%;
          background-color: #dc1f29;
          border-radius: 1vmin;
          -webkit-clip-path: polygon(5% 0, 0 5%, 0 95%, 5% 100%, 95% 100%, 100% 95%, 100% 5%, 95% 0);
                  clip-path: polygon(5% 0, 0 5%, 0 95%, 5% 100%, 95% 100%, 100% 95%, 100% 5%, 95% 0);
          position: relative;
          top: 22%;
        }
        .ears::before {
          /* ears border */
          height: 100%;
          width: 100%;
          background-color: #7d000f;
          border-radius: inherit;
          -webkit-clip-path: polygon(5% 0, 0 5%, 0 95%, 5% 100%, 95% 100%, 100% 95%, 100% 5%, 95% 0, 95% 4%, 98% 7%, 98% 93%, 95% 96%, 5% 96%, 2% 93%, 2% 7%, 5% 4%, 95% 4%);
                  clip-path: polygon(5% 0, 0 5%, 0 95%, 5% 100%, 95% 100%, 100% 95%, 100% 5%, 95% 0, 95% 4%, 98% 7%, 98% 93%, 95% 96%, 5% 96%, 2% 93%, 2% 7%, 5% 4%, 95% 4%);
        }
        
        .helmet {
          height: 35%;
          width: 42%;
          background-color: #f7ba37;
          border: 0.6vmin solid #7d000f;
          border-radius: 11vmin;
          box-shadow: inset 0 0.6vmin 0 0.6vmin #dc1f29, inset 1vmin 2vmin 0 0.6vmin #dc1f29, inset -1vmin 2vmin 0 0.6vmin #dc1f29;
          overflow: hidden;
          z-index: 0;
        }
        .helmet-outline {
          height: 100%;
          width: 100%;
          background-color: #dc1f29;
          -webkit-clip-path: polygon(40% 100%, 34% 84%, 21% 77%, 10% 51%, 20% 25%, 36% 16%, 40% 33%, 60% 33%, 64% 16%, 80% 25%, 90% 52%, 79% 77%, 65% 84%, 60% 100%, 100% 100%, 100% 0, 0% 0%, 0 100%);
                  clip-path: polygon(40% 100%, 34% 84%, 21% 77%, 10% 51%, 20% 25%, 36% 16%, 40% 33%, 60% 33%, 64% 16%, 80% 25%, 90% 52%, 79% 77%, 65% 84%, 60% 100%, 100% 100%, 100% 0, 0% 0%, 0 100%);
          position: absolute;
          top: 0;
          z-index: 1;
        }
        .helmet-outline::after {
          /** border **/
          height: 100%;
          width: 100%;
          background-color: #7d000f;
          -webkit-clip-path: polygon(40% 100%, 34% 84%, 21% 77%, 10% 51%, 20% 25%, 36% 16%, 40% 33%, 60% 33%, 64% 16%, 80% 25%, 90% 52%, 79% 77%, 65% 84%, 60% 100%, 62% 100%, 67% 84%, 81% 77%, 92% 52%, 82% 25%, 63% 14%, 59% 32%, 41% 32%, 37% 14%, 18% 25%, 8% 51%, 19% 77%, 32% 84%, 38% 100%);
                  clip-path: polygon(40% 100%, 34% 84%, 21% 77%, 10% 51%, 20% 25%, 36% 16%, 40% 33%, 60% 33%, 64% 16%, 80% 25%, 90% 52%, 79% 77%, 65% 84%, 60% 100%, 62% 100%, 67% 84%, 81% 77%, 92% 52%, 82% 25%, 63% 14%, 59% 32%, 41% 32%, 37% 14%, 18% 25%, 8% 51%, 19% 77%, 32% 84%, 38% 100%);
        }
        .helmet-outline::before {
          /* curve inside outline */
          height: 90%;
          width: 75%;
          border-top: 0.4vmin solid #7d000f;
          border-radius: 100%;
          left: 12.5%;
          top: 20%;
        }
        .helmet .eyebrowns-line {
          height: 70%;
          width: 200%;
          background-color: #f7ba37;
          border-bottom: 0.6vmin solid #7d000f;
          border-radius: 100%;
          top: -20%;
          left: -50%;
          position: absolute;
          z-index: 1;
        }
        .helmet .eyes::after, .helmet .eyes::before {
          height: 100%;
          width: 33%;
          background-color: #fefefe;
          background-image: radial-gradient(ellipse farthest-corner, rgba(111, 199, 233, 0), rgba(111, 199, 233, 0.2) 50%, #6fc7E9);
          border-radius: 3vmin;
        }
        .helmet .eyes {
          height: 20%;
          width: 100%;
          top: 40%;
        }
        .helmet .eyes::before {
          /* left eye */
          -webkit-clip-path: polygon(0 0, 10% 100%, 100% 80%, 100% 0);
                  clip-path: polygon(0 0, 10% 100%, 100% 80%, 100% 0);
          left: 11%;
        }
        .helmet .eyes::after {
          /* right eye */
          -webkit-clip-path: polygon(0 0, 0 80%, 90% 100%, 100% 0);
                  clip-path: polygon(0 0, 0 80%, 90% 100%, 100% 0);
          right: 11%;
        }
        .helmet .mouth {
          height: 100%;
          width: 100%;
          background-color: #7d000f;
          -webkit-clip-path: polygon(30% 84%, 38% 76%, 61% 76%, 71% 87%, 71% 88%, 60% 77%, 39% 77%, 30% 86%);
                  clip-path: polygon(30% 84%, 38% 76%, 61% 76%, 71% 87%, 71% 88%, 60% 77%, 39% 77%, 30% 86%);
          position: absolute;
          top: 0;
        }
        
        .legs .right, .legs .left, .upper-body .right-arm .arm, .upper-body .left-arm .arm {
          /* arms & legs */
          background-color: #dc1f29;
          border: 0.6vmin solid #7d000f;
          transform-origin: top center;
          z-index: -2;
        }
        .legs .right::before, .legs .left::before, .upper-body .right-arm .arm::before, .upper-body .left-arm .arm::before {
          /* gold stripe */
          background-color: #f7ba37;
          border: inherit;
        }
        
        .left-hand .palm .cannon, .upper-body .trunk .arc-reactor {
          background-color: #ca1c26;
          border: 0.4vmin solid #7d000f;
          border-radius: 100%;
        }
        .left-hand .palm .cannon::before, .upper-body .trunk .arc-reactor::before {
          background-image: radial-gradient(circle, #fefefe, #6fc7E9);
          border: inherit;
          border-radius: inherit;
        }
        
        .legs .right .propulsion, .legs .left .propulsion, .upper-body .right-arm .arm .propulsion {
          background-image: linear-gradient(to bottom, #6fc7E9, rgba(111, 199, 233, 0.1) 50%, transparent);
          left: 10%;
          top: 100%;
        }
        
        .upper-body {
          height: 20%;
          width: 60%;
          align-items: center;
          display: flex;
          top: -3.5%;
          z-index: -1;
        }
        .upper-body .right-arm .shoulder, .upper-body .left-arm .shoulder {
          height: 40%;
          width: 100%;
          background-color: #dc1f29;
          border: 0.6vmin solid #7d000f;
          border-radius: 100% 100% 2vmin 2vmin;
          transform-origin: top center;
          z-index: -1;
        }
        .upper-body .left-arm {
          height: 100%;
          width: 24%;
          align-self: flex-start;
        }
        .upper-body .left-arm .shoulder {
          transform: translateX(50%) rotateZ(35deg) rotateX(1deg);
        }
        .upper-body .left-arm .arm {
          height: 40%;
          width: 75%;
          transform: translate(41%, -40%) rotateZ(15deg) rotateX(1deg);
        }
        .upper-body .left-arm .arm::before {
          /* gold arm stripe */
          height: 100%;
          width: 40%;
          border-width: 0 0 0 0.6vmin;
          right: 0;
        }
        .upper-body .trunk {
          height: 100%;
          width: 52%;
          align-items: center;
          background-color: #dc1f29;
          border-radius: 1vmin;
          -webkit-clip-path: polygon(0 0, 0 100%, 15% 100%, 20% 85%, 80% 85%, 85% 100%, 100% 100%, 100% 0);
                  clip-path: polygon(0 0, 0 100%, 15% 100%, 20% 85%, 80% 85%, 85% 100%, 100% 100%, 100% 0);
          display: flex;
          justify-content: center;
        }
        .upper-body .trunk::before {
          /* border */
          height: 100%;
          width: 100%;
          background-color: #7d000f;
          border-radius: inherit;
          -webkit-clip-path: polygon(0 0, 50% 0, 50% 3.75%, 3.2% 3.75%, 3.2% 96.25%, 13.4% 96.25%, 18.4% 81.25%, 81.6% 81.25%, 86.6% 96.25%, 96.8% 96.25%, 96.8% 3.75%, 50% 3.75%, 50% 0, 100% 0%, 100% 100%, 85% 100%, 80% 85%, 20% 85%, 15% 100%, 0 100%);
                  clip-path: polygon(0 0, 50% 0, 50% 3.75%, 3.2% 3.75%, 3.2% 96.25%, 13.4% 96.25%, 18.4% 81.25%, 81.6% 81.25%, 86.6% 96.25%, 96.8% 96.25%, 96.8% 3.75%, 50% 3.75%, 50% 0, 100% 0%, 100% 100%, 85% 100%, 80% 85%, 20% 85%, 15% 100%, 0 100%);
          /* manual align needed by FF stable */
          left: 0;
          top: 0;
        }
        .upper-body .trunk .arc-reactor {
          height: 8vmin;
          width: 8vmin;
        }
        .upper-body .trunk .arc-reactor::before {
          /* arc rea.........完整代码请登录后点击上方下载按钮下载查看