Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
Node is saved as draft in My Content >> Draft
  • 2D character using css3

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 2
    Comment on it
    K
    • { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

    .man_Block { position: fixed; height: 100%; width: 100%; top:0px; left:0px; z-index:99999999; }

    .man-body { width: 60px; height: 92px; margin: 0 auto; top:50%; left: 50%; position: absolute; }

    .cap { height:25px; background:#ea3a28; border-top-left-radius: 50px; border-top-right-radius: 50px; position: relative; }

    .cap .capfold { background: none repeat scroll 0 0 #df3220; border-radius: 2px; box-shadow: 0 0px 1px #cf2d1c; height: 20px; left: -4px; position: absolute; top: 25px; width: 67px; text-align: center; color:#fff; font-size: 12px }

    .shave { background:#4d2f1c; width: 60px; height: 50px; margin-top: 20px; border-bottom-left-radius:40px; border-bottom-right-radius:40px; position: relative; }

    .eyesBlcok { background: none repeat scroll 0 0 #f8a324; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; height: 16px; left: 4px; position: absolute; width: 52px; }

    .eyesBlcok .nose { background:#f8a324; border-radius: 15px; bottom: -5px; height: 10px; left: 21px; position: absolute; width: 8px; z-index: 99999999; }

    .eyesBlcok .eyes { margin-left: 9px; margin-top: 3px; border-image: none; border-radius: 5px; border-style: none solid solid; border-width: 0 2px 2px; border-top-left-radius:0px; border-top-right-radius:0px; height: 8px; width: 9px; }

    .eyesBlcok .eyes.RT { margin-left: 34px; margin-top: -8px; }

    .shave .mouth { border: 2px solid #f8a324; border-radius: 80px; height: 10px; left: 15px; position: absolute; top: 25px; width: 10px; }

    .shave .ears { border-top-left-radius: 10px; border-bottom-left-radius: 10px; height: 5px; left: -2px; position: absolute; top: 5px; width: 2px; background:#f8a324; }

    .shave .ears.RT { border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-top-left-radius:0px; border-bottom-left-radius:0px; left: 60px; top: 5px; }

    .spaceOutUp { -webkit-animation-name: spaceOutUp; animation-name: spaceOutUp; }

    @-webkit-keyframes spaceOutUp { 0% { opacity: 1; -webkit-transform-origin: 50% 0%; -webkit-transform: scale(1) translate(0%, 0%); }

    100% { opacity: 0; -webkit-transform-origin: 50% 0%; -webkit-transform: scale(.2) translate(0%, -200%); } } @keyframes spaceOutUp { 0% { opacity: 1; transform-origin: 50% 0%; transform: scale(1) translate(0%, 0%); }

    100% { opacity: 0; transform-origin: 50% 0%; transform: scale(.2) translate(0%, -200%); } }

    How to make 2d character using css3

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: