css绘制一个复仇者联盟卡通人物效果代码-html代码-BFW代码库

css绘制一个复仇者联盟卡通人物效果代码

代码语言：html

代码描述：css绘制一个复仇者联盟卡通人物效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        @import url(https://fonts.googleapis.com/css?family=Lato:300);
        *, *:before, *:after {
          box-sizing: border-box;
        }
        
        body {
          font-size: 16px;
          position: absolute;
          width: 100%;
          height: 100%;
          font-family: 'Lato', sans-serif;
        }
        
        .wrapper {
          position: relative;
          width: 550px;
          height: 365px;
          margin: 15% auto;
          -webkit-animation: shake 7s infinite;
                  animation: shake 7s infinite;
        }
        
        .hulk {
          position: absolute;
          margin-left: 200px;
          bottom: 0px;
          margin-bottom: 300px;
        }
        .hulk .head {
          width: 4.713em;
          position: absolute;
          margin-top: -2.75em;
          margin-left: 3.563em;
          border-bottom: 3.75em solid #bdbd00;
          border-left: 0.938em solid transparent;
          border-right: 0.938em solid transparent;
          height: 0;
          z-index: 10;
        }
        .hulk .head::after {
          content: "";
          width: 2.25em;
          height: 0.375em;
          position: absolute;
          margin-top: 0.538em;
          margin-left: 0.313em;
          background: #034600;
        }
        .hulk .head::before {
          content: "";
          width: 3.25em;
          height: 0.75em;
          position: absolute;
          margin-top: -0.75em;
          margin-left: -0.25em;
          background: #034600;
          border-top-left-radius: 1.875em;
          border-top-right-radius: 1.875em;
        }
        .hulk .mouth {
          width: 31px;
          height: 0px;
          position: absolute;
          margin-top: 25px;
          margin-left: 8px;
          overflow: hidden;
          background-image: linear-gradient(to bottom, #ffffff, #ffffff 25%, #4b0a00 25%, #4b0a00 70%, #ffffff 75%, #ffffff 100%);
          border-top-left-radius: 0.5em;
          border-top-right-radius: 0.5em;
          -webkit-animation: mouthOpen 7s infinite;
                  animation: mouthOpen 7s infinite;
        }
        .hulk .mouth::before {
          content: "";
          width: 10px;
          height: 7px;
          position: absolute;
          background: #902e2b;
          margin-top: 9px;
          margin-left: 11px;
          border-top-left-radius: 0.5em;
          border-top-right-radius: 0.5em;
        }
        .hulk .right-arm {
          width: 13.313em;
          height: 13.75em;
          margin-top: 1em;
          margin-left: 2em;
          border-radius: 50%;
          background: #b5b500;
          position: absolute;
          clip: rect(-1em, 11.2em, 12.55em, 7.625em);
          -webkit-animation: hulkRightarm 7s infinite;
                  animation: hulkRightarm 7s infinite;
        }
        .hulk .right-arm::after {
          content: "";
          width: 12.063em;
          height: 9.625em;
          border-radius: 50%;
          background: white;
          position: absolute;
          transform: translateY(1.25em);
          margin-left: -3.313em;
        }
        .hulk .left-arm {
          width: 13.313em;
          height: 13.75em;
          margin-top: 1em;
          margin-left: -4.3em;
          border-radius: 50%;
          background: #949400;
          position: absolute;
          clip: rect(-0.188em, 6.1em, 13.875em, 2.3em);
          -webkit.........完整代码请登录后点击上方下载按钮下载查看