cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="m-body">
  <div class="hair"></div>
   <div class="hair"></div>
   <div class="hair"></div>
   <div class="hair"></div>
   <div class="hair"></div>
   <div class="hair"></div>
  
  <div class="m-glasses">
    <div class="m-eye"></div>
        <div class="m-eye2"></div>
  </div>
  
  <div class="m-mouth">
    <span class="m-tooth"></span>
  </div>
  
  <div class="m-pants">
    <div class="gru"></div>
  </div>
  
</div>
            
          
!
            
              html,body{
background:#000;
}
.m-body{
width:500px;
height:450px;
background:#f5d028;
margin:50px  auto;
/*border-radius*/
-webkit-border-radius:47%;
   -moz-border-radius:47%;
        border-radius:47%;
overflow-x:hidden;
position:relative;
}
.m-body .hair{
height:35px;
width:2px;
background:black;
position:absolute;
top:5px;
left:49%;
display:block;
z-index:99;
/*border-radius*/
-webkit-border-radius:50% 50% 5% 5%;
   -moz-border-radius:50% 50% 5% 5%;
        border-radius:50% 50% 5% 5%;
/*transform*/
-webkit-transform:rotate(40deg);
   -moz-transform:rotate(40deg);
    -ms-transform:rotate(40deg);
     -o-transform:rotate(40deg);
        transform:rotate(40deg);
}
.m-body .hair:nth-child(2){
height:30px;
left:51%;
/*transform*/
-webkit-transform:rotate(40deg);
   -moz-transform:rotate(40deg);
    -ms-transform:rotate(40deg);
     -o-transform:rotate(40deg);
        transform:rotate(40deg);
}
.m-body .hair:nth-child(3){
height:25px;
left:53%;
/*transform*/
-webkit-transform:rotate(40deg);
   -moz-transform:rotate(40deg);
    -ms-transform:rotate(40deg);
     -o-transform:rotate(40deg);
        transform:rotate(40deg);
}
.m-body .hair:nth-child(4){
height:32px;
left:54%;
/*transform*/
-webkit-transform:rotate(40deg);
   -moz-transform:rotate(40deg);
    -ms-transform:rotate(40deg);
     -o-transform:rotate(40deg);
        transform:rotate(40deg);
}
.m-body .hair:nth-child(5){
height:25px;
left:49%;
/*transform*/
-webkit-transform:rotate(40deg);
   -moz-transform:rotate(40deg);
    -ms-transform:rotate(40deg);
     -o-transform:rotate(40deg);
        transform:rotate(40deg);
}
.m-body .hair:nth-child(6){
height:29px;
left:48%;
/*transform*/
-webkit-transform:rotate(40deg);
   -moz-transform:rotate(40deg);
    -ms-transform:rotate(40deg);
     -o-transform:rotate(40deg);
        transform:rotate(40deg);
}
.m-body .m-glasses{
width:100%;
height:25px;
border-bottom:20px solid black;
/*border-radius*/
-webkit-border-radius:100%;
   -moz-border-radius:100%;
        border-radius:100%;
background:#f5d028;
position:absolute;
top:80px;
}
.m-body .m-glasses .m-eye{
width:140px;
height:140px;
background:white;
margin:auto;
position:relative;
/*border-radius*/
-webkit-border-radius:50%;
   -moz-border-radius:50%;
        border-radius:50%;
margin-top:-40px;
border:10px solid #BDC2BE;
}
.m-body .m-glasses .m-eye2{
width:155px;
height:155px;
background:#BDC2BE;
margin:auto;
position:absolute;
/*border-radius*/
-webkit-border-radius:50%;
   -moz-border-radius:50%;
        border-radius:50%;
top:-38px;
left:34.5%;
/*animation*/
-webkit-animation:blink 5s infinite step-start 0s;
   -moz-animation:blink 5s infinite step-start 0s;
    -ms-animation:blink 5s infinite step-start 0s;
     -o-animation:blink 5s infinite step-start 0s;
        animation:blink 5s infinite step-start 0s;
}
.m-body .m-glasses .m-eye:before{
content:"";
position:absolute;
width:50px;
height:50px;
background:#714C3B;
/*border-radius*/
-webkit-border-radius:50%;
   -moz-border-radius:50%;
        border-radius:50%;
top:45px;
left:45px;
/*box-shadow*/
-webkit-box-shadow:2px 2px 5px 0 #604235;
   -moz-box-shadow:2px 2px 5px 0 #604235;
        box-shadow:2px 2px 5px 0 #604235;
}
.m-body .m-glasses .m-eye:after{
/*border-radius*/
-webkit-border-radius:50%;
   -moz-border-radius:50%;
        border-radius:50%;
content:"";
width:25px;
height:25px;
background:black;
position:absolute;
top:58px;
left:58px;
/*box-shadow*/
-webkit-box-shadow:2px 2px 2px 0 rgba(0,0,0,0.5);
   -moz-box-shadow:2px 2px 2px 0 rgba(0,0,0,0.5);
        box-shadow:2px 2px 2px 0 rgba(0,0,0,0.5);
}
.m-body .m-mouth{
width:100px;
height:130px;
background:transparent;
position:absolute;
/*border-radius*/
-webkit-border-radius:100%;
   -moz-border-radius:100%;
        border-radius:100%;
top:120px;
right:120px;
border-right:30px solid #A74870;
/*transform*/
-webkit-transform:rotate(50deg);
   -moz-transform:rotate(50deg);
    -ms-transform:rotate(50deg);
     -o-transform:rotate(50deg);
        transform:rotate(50deg);
z-index:9;
}
.m-body .m-pants{
position:absolute;
height:140px;
width:100%;
bottom:0px;
padding:20px;
background:#1a56de;
/*border-radius*/
-webkit-border-radius:0 0 500% 500%;
   -moz-border-radius:0 0 500% 500%;
        border-radius:0 0 500% 500%;
border-top:2px dashed #C66902;
/*box-shadow*/
-webkit-box-shadow:0 0 0 4px #1a56de, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
   -moz-box-shadow:0 0 0 4px #1a56de, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
        box-shadow:0 0 0 4px #1a56de, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
}
.m-body .m-pants:before, .m-body .m-pants:after{
content:"";
width:250px;
height:100px;
background:#1a56de;
position:absolute;
border:2px dashed #C66902;
/*box-shadow*/
-webkit-box-shadow:inset 0 0 0 5px #1a56de, inset 0 0 0 50px #f5d028;
   -moz-box-shadow:inset 0 0 0 5px #1a56de, inset 0 0 0 50px #f5d028;
        box-shadow:inset 0 0 0 5px #1a56de, inset 0 0 0 50px #f5d028;
}
.m-body .m-pants:before{
/*border-radius*/
-webkit-border-radius:0 15% 15% 0;
   -moz-border-radius:0 15% 15% 0;
        border-radius:0 15% 15% 0;
left:-70px;
top:40px;
}
.m-body .m-pants:after{
/*border-radius*/
-webkit-border-radius:15% 0 0 15%;
   -moz-border-radius:15% 0 0 15%;
        border-radius:15% 0 0 15%;
right:-30px;
top:40px;
}
.m-body .m-pants .gru{
height:100px;
width:100px;
 background:url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABQAAD/7gAOQWRvYmUAZMAAAAAB/9sAhAACAgICAgICAgICAwICAgMEAwICAwQFBAQEBAQFBgUFBQUFBQYGBwcIBwcGCQkKCgkJDAwMDAwMDAwMDAwMDAwMAQMDAwUEBQkGBgkNCwkLDQ8ODg4ODw8MDAwMDA8PDAwMDAwMDwwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCABaAFoDAREAAhEBAxEB/8QArQAAAgIDAQEBAAAAAAAAAAAAAAkECAMFBwIGCgEAAQUBAQEAAAAAAAAAAAAAAAIDBQYHAQgEEAACAQMDAgMDCQYFBQAAAAABAgMEBQYAEQchEjETCEFRIrEycpIzUxSU1GFxgSMVCUJSYoI08JEllRYRAAECAwQGBwYFBAMBAAAAAAECAwARBCExUQVBYZHREgZxsSIyQlITgaFiciMH8MGColOSQ2MU4fFzJP/aAAwDAQACEQMRAD8AqtLNMJZQJX2DsPnE+39+vZyUiV0YmSYx+dN96/1jrvCMI5MwedN96/1jo4RhBMwedN96/wBY6OEYQTMHnTfev9Y6OEYQTMHnTfev9Y6OEYQTMHnTfev9Y6OEYQTMHnTfev8AWOjhGEEzB5033r/WOjhGEEzB5033r/WOjhGEEzB5033r/WOjhGEEzE/vk++k/wCL3fPbx/7+H7NNSGGmFz6ogTfbS/Tb5dOpuEIN8Ytdgg0QR4kkjiAMjhAzBU38WY+Cge0n2Aa6ATdHI7xhHpk575Cpoa/HuN6+ktNQO6C9X10tFM6/5l/FFZWHuIjIOqvmXOmTZeopdqElQ8KJuH9vZ/dEtTZHWVFqWyBiez1x2GD0B89SQd9RcsLoaxwxpLZJdpnkn7B3OFdabtHYDufHVfV91MnBkEvEaTwCz90SA5UrJWlAOEzuj4bJvRt6j8YgeqOBR5RTR79z43XwXCQAe0wMYZTv7O1SdSdH9w8jqjw+uWz/AJElI/q7Q2mPlf5crmhPg4h8JB918VoqqeqoK2otlxo6i2XOkO1XbK2GSmqYj/rhlVXX+I1cm1pcQFoIUk3EEEHoIsiFWhSDwqBBwNkYdKjkGiCDRBGy/R6a3wrdEKb7aX6bfLpxNwhJvjFrsEfd8bca5ly3ltFhWC2wXC8VKGesqpiY6O30ikLJWVswB8uJN9unxO3wICx1F5znNLlFMamqVJIsAHeWrQlA0k7ALTZH10NC7WOBtsW+4DEw6Hg/0r8Z8LU1JcVoYszz9UBrc5usCO8cnQlbfTN3JSxgjoRvIf8AE51515l53r86UUFRbY0NpNn61XrPT2cBGkZZkbFEAZcS/MfyGjr1x1XlTlTEeIcQrs3zi4vDQU5EFBQxbSVtxrGBMVHRxkjvkfb9yruzEKCdQeSZJU5vUppqZM1G0nwoTpUo6ANpuEyY++urmqNouOGz3k4DXCNeROfuTeRuSrfylPe58YveNzF8At9tlJgsMG/2UQPwzNKOlQ7r/O6qQE7VHpfKOVKDLqBVCEBxCx9QqFrpxPlCfAB3L+9MxmFZm9RU1Af4uEp7oFyd89OPRDavTR6lrLzvZHttyWnsPKFhpxJkuNxkrFVRKQv9RtwYktCxI703LRMe1uhVmwfnLk13IneNE10yz2F6QfIvBQ0G5YtGkC/ZLnSK9EjY4Lxj8SdXVHVuUOHuOeZLSbVyBjcN1kRSLff4doLrRNsdnpq1R5ikb79rdyHwZSNQeS8wV2TO+pSOFOKTahWpSLj02HAx99bl7FYnhdTPXpHQfwIS76gfTllvAV4p2rJ2yTA73MYsazWOLyx5vVhRV8a7rDUhRuu3wSjqnUMo9F8qc302ftEJHA+kTW3PR50HxIx0p02SJzfN8mcoFT7yDcr8jr69sV61bIh4NEEbL9HprfCt0Qpvtpfpt8unE3CEm+CCnq6yopaK30slfca+eKkt1BCN5J6idxHDEg/zO7BR+/QpaUJKlmSQCSTcABMn2COpSVEJAmTYOmH7+nng+1cEYBTY9GsVXl95EVdyBfkG7VVf2/YI3U+RSgmOJfDxfbuY68r82cyuZ7Wl4zDSZhtPlRj8y71H2XARrGUZYigZCB3jao4ncNH/ADH2fKXKOH8PYfXZrmtcaa3Ux8i32+DZqy41jgmKjo4iR3yPt+5RuzEKCdR2SZJU5xVJpqZM1G0k91CdKlHQke82C0x9FdXNUbRccNnvJwGuERcw8w5hzfmEuXZbKKaGnDwYvi8Dl6O0UbHfyYd9u+R9gZpSN3b3IFUen+XuX6bI6X0GLSbVrPecVicEjwp8IxJJjLMxzF2ud9Ry7QNCRvxOnojlupuPhjaWO+3zF73asmxi7VFhyOxVAqrNeaRu2WCUdD49GVhurowKupKsCDpiqpWaplTL6QttYkpJuI/Ii8EWg2iHGnlsrC0GShcYd76afUtZOd7I9tuSU9h5PsNOJMlxqMkRVUI2X+o27uO7Qsfnp1aJj2tupVm8185cmu5C9xomunWewvSD5F4KGg3LFo0gabkudIr0SNjgvGPxDV1RYDLcTx3O8ZveG5bbku2N5HTNSXahfxKHqskbeKSRsA8bDqrAEaqtBXP0D6KhhXC4gzSd+INxGkWRLVFOh9stuCaSJGPz68ucZXjh3kTI+PLzK1Y1mkSazXdl7RcLZUgvSVYA6bsgKuB4SKw16uyDOms4oW6tsS4rFJ8ix3k7bU4pIjJcxoVUb6mlaLjiNB/GmOcal4+KNl+j01vhW6IU320v02+XTibhCTfFv/QxgsGYc7U99rolmt/Glqmv6o4JU18zfhKE9Om6F3kG/tUH2az/AO5uZmjygtJPafUEfoHaXtkB7YsfK9KHqvjNyBP23Df7IbXylylh/D2H12a5rXNT26mbybfQQ7PWXGscExUdHGSO+R9v3KN2YhQTrBskySpzipTTUyZqNpJ7qE6VKOhI99wmTF+rq5qjaLjhs95OA1wiLmHmHMOb8wky7LpFpoaYPBi+LwOWo7RRud/Jh3275H2BmlI3c+5Aqj0/y9y9S5HS+gxaTatZ7zisTgkeFPh1kkxlmY5i7XO+o5doGhI34nT0RpOOuOsw5Xy2hwnBrYtyvlbG9RM8z+TS0dJEQJaurm2PlxJuBvsSzEKoLHbX05vm9LlNMampVwoFllqlKNyUjSo7ALSQIbo6J2scDbQmfcBidUMhx/8AtzYhHbQMu5RvtdepIlMjWWkpaWihlI+IRrUrNJIoPgWI392seq/u7VFz/wCemQEfGVKURr4eED2RcmuT2uH6jiidUgPfOKxc/ej/ADDhS1S5jZrwM94/pmVbpc1p/wANcbX37ASVtOpdGhLHbzYzsv8AjUDrq68q/cCmzpwU7iPRfPdE5oXqSq8K+E36Cbohc15ddok+og8aNNkiOkYa4qxY75e8XvlpybGbtUWHI7DUCqs15pSBLTygbEgHcMrAlXRgVdSVYEHV3qqVmqZUw8kLbWJKSbiPyIvBFoNoiAadWysLQZKFxh3npp9S9j53sr2y5JT2HlCxU4kyTGoyRFVRKQpuNu7iS0LEjvTq0THtbde1m81848mvZC7xomumWewvSD5F4KGg3LFo0gadkudIr0SNjgvGPxDV1Rwr+4lg0FZiOB8nU8Sivxu5tjt2mHznobmGlpwff5dRH093effqz/aTMyiqfoieytPqD5kWHak+4RF830oU0h4XpPCeg7j1wqTW6RQo2X6PTW+FbohTfbS/Tb5dOJuEJN8MV9DWSWbjzjb1HcnXmhr7hTYw1qNdS2yBqmrkpYKeaYRwxr7S8m7MfhVd2YhQTrIvubRu5hX5fRNlIK+ORUeFPESBMnoHSTYLTFy5XdTTsPvKBMpXX2T/ABqim3L/ADFl/OOXvmGWTLBTwK8OK4zTSF6K00TncRQnoJJJAAZZiN5D7kCqND5f5epsjpv9dgTJtWsjtOKxOCR4U+HpmYreY5i7XO+o5doGhI34nT0Ry7U3Hww3n+3ljFsoeJ8tzNI1a95Tk09vq6noWSktMUawwg+IBeV5CPed9YF92a1xeZNU57jbYUB8ThMzsAHsjQuUWEpplOeJSpexN3WYubm2eYdxvYJMpzzIKfGcehqIaSS61KyugnqW7Yo+2FHYliD7P36zvLcrqsyeDFK2VuEEyErhebSBZFkqKlunRxuGScf+o4vWerH0sXGjrrZcuWLNXW2500tFc6GSlrzHPT1CGOWJh+G6hlYg6sTfInMLagtFKsKSQQZpsItB72gxGKz7LlApU6CDYbDuhXz8OenJJJlo/WBZIqISyfgYZMduDvHB3Hykd+8dzKmwLbdT11tY5hzwgcWVLKpCf1E2nSbrJnRFIVl1DOyqEvlMbKx8d8K4te7Tk+M+tm02LI7BUCrs14pccuAlglA28O/ZlYbq6MCrqSrAg6Zqs2zWqZUw9k61trElJLqJEbLCLwRaDaIWzSUjKwtFYAoXHhO+LY+oj1BcJ8henXLMNpOUrJlXINVQ26elprZRVtLFV3OiqYZXeninjYRK/axCtIe3w7tUTlLlTNsvztqoVTLbYClAlSkqKUKBHaKTaRZaBbhE9m+bUlTQqbDgUsgXAiZBF098Kf1usUKNl+j01vhW6IU320v02+XTibhCTfDIf7cORLDe+XsObq9fQ2y/UynYg/h5JKOcbHxHbKm41j33fpJtUtRgVoPtkodRi58nPdp1vEA7LD1iPnvVp6SjhRuvK3FNsLYUxerzPC6VCzWVmO8lbQxqCTRkneSMfY/OX+XuE+vkPnz/AHOGhrlfVubcP9zBCz5/Krx3HtWqbz/IPRm+wOzepPl1j4cRo6Ll8gqyqysGVgCrA7gg9QQR4761giUU+L/ehznyxYBcLzxTm1xjs9gzCvS44nfalxHS0t1aMQzUtQ7dI1qVRCjkhQ4Kn5w1lX3M5Wer0IrqZPEttPCtItUUTmFJGngmZi+RnoMW7lfNUU5LDhkFGYOieke2GjZ/xziPJuOSYjn1jN+x2oqaetNB501P3T0zFoZFlgZG6EnwOx1ieV5vU5Y/69KvgcAInIGxV4kQRF4qqRqqRwOiafaOqKT89cO+j/grC66+XjjqGfKK2CSHC8SN3uH4q4VrAiM+X+IDJBGfillPwqBt1YhTo/K/MHM2e1SWm6ghsGbi+BHChOm3h7xuSm8nVMis5pl2V0LRUpscXhHEZk7bsTCkow4RRIweTYd7AbAn27D2DW9GU7Iz+LK+m/043/nvIJKmeSaxca4/UrHleUou0k8g2Y263dw2edh89+qwqe5t2KqabzhzgzkLPCmS6hY7CNAH8i8E+UXrOqZicybJV165mxsXnHUNfVsBtf6suAOBOJOF7hkuIYL/AEfK6672y0WC5G41s7RvPL3zt5c0zK/8iN991Pjv01ReROas4zfNUs1D/E0EqUocKRYBZaACO0RE7n2UUVHSFbaJKJABmfzOE4V7ra4o8bL9HprfCt0Qpvtpfpt8unE3CEm+Ov8Ap+5Pj4e5fxDOK1mFhilkteWqu5/8VcAIqiTYbb+S3ZN/sOq/zXkpzjLHaZPflxI+dFoH6hNPtiSyet/06pDh7tx6Duvj9ByvGwSWCWOoglQPDPGQ8csci7qykbhldTv7iDrygQRYRI9Ua1YYUl6tPSU2GNdOVuKbWz4W5erzTDKRCzWVmJaSuoo13JoySTJGOsPzl/l7hN55D58FYE0Ncr6tzbh/uYIWf5PKrx3HtWqoWf5B6U32B2b1J8usfDiNHRcvgiOWPYhZYpV8DsyspH8QQRrWLQcDFQjo+O8w8v4hbf6Ni3KeU2G0BSkdsprjKYYwdukSy9/l+HTs229moer5eyysc9R+maWvEpEz0ylP2zj7GcyqmU8KHFAYT6o+GuVxuV6uNTeL3c6y93es/wCXdrhUSVVTJ132aWVmbbf2b7fs1JsstsIDbSQhAuSkBIHsEfK44pxXEsknE2mLDenD04X/AJ8v71FQ9RYuM7DUCPLMrjHbLPIoDG3W4sCGqGBHe+xWFT3NuxVTUucOcGcgZ4UyXUrHYRoA/kc+HAXrOqZiZybJl165mxsXnHUNfVsBeNjmOWDD7BaMVxW009hxyw060tntFKNo4Yl6nqdyzMd2d2JZmJZiSdeaKurerHlPvqK3FmalG8ndoAFgFgjTmWUMoCECSRcIVB6/eUafJs+sHF9pnWe38bRvWZFKhBVr1cI1Ah3BIJp6bYN7mkI8RrdftXkiqajcrXBJT1if/NBv/Uu7UnXFC5srg48lhNyLT8x3Drig2tTipxsv0emt8K3RCm+2l+m3y6cTcISb4xEAgggEHoQeoI0qOQz70Y+qCjSitHCHJNzWlqKTto+Mcoq32inh69loqpWOyyR+FOzHZ1/l9GVe7FPuLyUriXmVGmYNrqBeDpdSNKT4x4T2riZXnlzPAQKZ42ixJx+E68NnSzYhkYqy7MN1dGHv6EEH2EeIOsZi6wpD1a+ks4W105W4ptRfCnL1WZ4XSIWaysx3kraGNdyaMk7yRjrCfiX+XuE3nkPnz/c4aGuV9W5tw/3MELPn8qvHce1LioGf5B6M32B2fEkeHWPhxGjouXyCGCsrBlYAqwO4IPUEEeOtYIlFQiyfpw9OF/58v8k9RJU2DjSwziPKssjXaSaUbMbdbiw2aoYfPfqsKnubdiqmm84c4M5AzwpkuoWOwjQB/I58OAvWdUzE5k2TLr1zNjYvOOoa+rYC8bHMcsGH2C04titop7BjdhpxTWiz0q9sUMY6nqdyzMSWd2JZmJZiSdeaKurerHlPvqK3FmalG8n8WACwCwRpzLKGUBCBJIuEV29TfqTtHBeOyWuzT09z5XvtOf8A5iwHaQUKP8P9Trl69kUfUxo3WVx2j4QzC3cmcnO56/xuAppkHtq83+NGKjpI7otOgGHzrOUUDck2uG4YfEdXXthG1TU1ddVVdfcKya43K4zy1dyuVSxeapqJ3Mks0rnqzO7FidemEIS2kIQAlKQAALgBYANQEZetRWoqJmSZnpjDpUcjZfo9Nb4VuiFN9tL9Nvl04m4Qk3xi12CPEkccqNFKgkjcbOjdQRroJBmI5F4OEvW/nXHVLQ4zyHRT8lYfRokFBcDMsd9oIV8EWeT4KtFHgsxDgdPMPhrNOZPtrSZiovUhDDptIl9JR6Bag/LNPwxaMt5ndpwEPDjTj4hv9u2GLYP6p+As9SnFp5Ht1muNQp3sORn+k1in2qyVO0bAj/K5B1keZ8kZzQE+pTqUkeJv6if227QIuFNnlHUDsuAHBXZPviqmd+ijjvKuTLXkmD8hWHFeLL3NNV5xj9JX07T0ckZ8x0srq7RJHVEkFXIEB3ZAwIRbxln3HrqSgUzUsLcqUgBtRSZKF31ReSjQR37lS7xgqrlxh2oC21pS2bVCd3y6Lf26J3RbiflX06cMY1acbjz3E8Tx2wU/4WzY3bqxKyWONfiISClM0skjk9zM3xOxJYknVCRked5y+p70HXHFmalKSUgn5lSAAuAuAsFkT5r6KjbCONKUgWAGfuEzvimHLX9wV6imqbPwhj89DNICn/32RQoHi/10Vt3bdvc052Hj5Z1ouQ/ajhUHMyWCP42zf87mGpH9UVzMObZgppk/qV+Sd+yFt3O53O93S43y93KqvV7vE5qbteK6VpqmpmbxeWRupO3QDwA6AAa2JhhthtLTSQlCRJKQJADUPxPTFMccU4orUZk3kxC05CINEEbL9HprfCt0Qpvtpfpt8unE3CEm+MWuwQaIINEEeXjjlUpIiyIfFGAIP8DroJFojkRv6fQjoKOAD3CNQPk0v1V4mOcIjNFTwQAiCCOEHxCKF+QaSpZVeZx2UZdJjsGiCDRBBogjZfo9Nb4Vuj0/z2/4Xifm+H8P2a4LtMd2R5/J67tjmyD8no2wbIPyejbBsg/J6NsGyD8no2wbIPyejbBsg/J6NsGyD8no2wbIPyejbBsg/J6NsGyJP/rfsv8Ar/dpH9V/49kK2R//2Q==);
left:38%;
top:40px;
/*box-shadow*/
-webkit-box-shadow:inset 0 0 5px 0 #1A56DE;
   -moz-box-shadow:inset 0 0 5px 0 #1A56DE;
        box-shadow:inset 0 0 5px 0 #1A56DE;
position:absolute;
}
@keyframes blink{
0%, 10% {
   opacity:1;
  }
  5%, 15%,100% {
   opacity:0;
  }
}

@-webkit-keyframes blink{
0%, 10% {
   opacity:1;
  }
  5%, 15%,100% {
   opacity:0;
  }
}

@-moz-keyframes blink{
0%, 10% {
   opacity:1;
  }
  5%, 15%,100% {
   opacity:0;
  }
}

@-o-keyframes blink{
0%, 10% {
   opacity:1;
  }
  5%, 15%,100% {
   opacity:0;
  }
}




            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console