" Learn Free Coding contains well written, well thought, well explained and easily Understandable computer science articles, Learn C, Java, Python, HTML, C# & everything else. "

Home / Css Lady Code / Code For Css Lady - Codingyan

Code For Css Lady - Codingyan

<!doctype html>
<html>
  <head>
  </head>
  <body>
  <script>
     
alert("Created By Shaishav Anand")
  </script>
  <style>
      /* Created by Shaishav Anand */

.woman{width: 320px;
    height: 360px;
   
   
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
     
    margin: auto;transform:rotateZ(1deg);


}

@keyframes blink{
  0%{top:110px;}
  50%{top:113px;}
  70%{top:123px;}
  100%{top:110px;}
 
 
}



.a1{  width: 100px;
      height: 30px;
      border-radius: 50%;
      box-shadow: 15px 10px 0 0 black;transform:rotateX(-186deg);position:absolute;top:85px;left:0px;}
.a3{width: 100px;
      height: 30px;
      border-radius: 50%;
      box-shadow: 15px 10px 0 0 black;transform:rotateZ(-186deg);position:absolute;top:80px;left:160px;}


}
.eye1{position:absolute;top:120px;left:-0px;width:5px;height:50px;}
.uppereye{position:relative;top:120px;left:58px;width:50px;height:50px;transform:rotateY(0deg) rotateZ(10deg);
-webkit-transform-origin: 50%;
    -webkit-animation: blink 4s infinite;

}
.uppereyeleft{width: 40px;
      height: 15px;
      border-radius: 50%;
      box-shadow: 1px -5.5px 1px 0 black;position:absolute;top:4px;left:-20px;transform:rotateZ(-25deg)}
.lowereye{width: 40px;
      height: 15px;
      border-radius: 50%;
      box-shadow: 1px -4px 1px 0 black;position:absolute;top:10px;left:-20px;transform:rotateX(180deg) rotateZ(-18deg)}

.lowereyeright{width: 40px;
      height: 15px;
      border-radius: 50%;
      box-shadow: 1px -4px 1px 0 black;position:absolute;top:6px;left:6px;transform:rotateX(180deg) rotateZ(38deg)}


.uppereye1{position:absolute;top:115px;left:162px;width:50px;height:50px;transform:rotateY(180deg) rotateZ(20deg);-webkit-transform-origin: 50%;
    -webkit-animation: blink 4s infinite;}
.e1{  width: 20px;
      height: 30px;
      border-radius: 50%;
      box-shadow: 1px 3px 0 0 black;transform:rotateZ(35deg);position:absolute;top:-20px;left:-20px;}
.e2{  width: 20px;
      height: 30px;
      border-radius: 50%;
      box-shadow: 1px 3px 0 0 black;transform:rotateZ(39deg);position:absolute;top:-22px;left:-15px;}
.e3{  width: 22px;
      height: 30px;
      border-radius: 50%;
      box-shadow: 1px 3px 0 0 black;transform:rotateZ(35deg);position:absolute;top:-26px;left:-9px;}
.e4{  width: 17px;
      height: 25px;
      border-radius: 50%;
      box-shadow: 1px 3px 0 0 black;transform:rotateZ(35deg);position:absolute;top:-11px;left:-24px;}
.e5{  width: 10px;
      height: 10px;
      border-radius: 50%;
      box-shadow: 32px 1px 0 0 black;transform:rotateZ(131deg);position:absolute;top:-59px;left:50px;}
.ball{width:29px;height:29px;background:radial-gradient(circle at center, black 1%, darkslateblue 50%, white 100%);border-radius:50%;position:absolute;top:-3px;z-index:-1;}
.base{width: 47px;
      height: 7px;
      border-radius: 50%;
      box-shadow: 4px 7px 3px 3px lightgrey;position:absolute;top:200px;left:115px}
.hole1{width:12px;height:2px;border-radius:40%;background:black; box-shadow: 0px 1px 3px 2px black;position:absolute;top:200px;left:115px;transform:rotateZ(15deg);posiiton:absolute;top:209px;left:125px}
.hole2{width:12px;height:2px;border-radius:40%;background:black; box-shadow: 0px 1px 3px 2px black;position:absolute;top:200px;left:115px;transform:rotateZ(-15deg);posiiton:absolute;top:209px;left:145px}




  .lipleft {
      position: relative;
      width: 150px;
      height: 90px;
    }
    .lipleft:before,
    .lipleft:after {
      position: absolute;
      content: "";
      left: 50px;
      top: 220px;
      width: 50px;left:142px;
      height: 25px;
      background: red;
      border-radius: 50px 50px 0px 0;
      transform: rotate(-45deg);
      transform-origin: 0 100%;
    }
    .lipleft:after {
      left:92px;
      transform: rotate(45deg);
      transform-origin: 100% 100%;
    }
.round{      width: 70px;
      height: 60px;
      border-radius: 50%;
      box-shadow: 15px 12px 0 0px red;transform:rotateZ(45deg);position:absolute;top:165px;left:106px;
-webkit-transform-origin: 50%;
    -webkit-animation: move 5s infinite;

}


@keyframes move{
  0%{left:107px}
  50%{left:103px }
  70%{left:107px;top:169px}
  100%{left:107px}
 
 
}
.pankaj{background-image:url(https://i.imgur.com/ePwciUb.png);width:500px;height:500px;position:absolute;transform:scale(1);background-repeat:no-repeat;top:-180px;left:-110px;}



.gal1{     width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 25px solid transparent;
      border-top: 100px solid red;filter:blur(38px);transform:rotateZ(-35deg);position:absolute;top:170px;left:60px;z-index:-2;}
.gal2{     width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 25px solid transparent;
      border-top: 100px solid red;filter:blur(38px);transform:rotateZ(35deg);position:absolute;top:170px;left:190px;z-index:-1}
.h1{


            margin:0 auto;
            position:relative;
            width:100%;
            height:100%;
            }
   
           .h1:after{
            content:"";
            position:absolute;
            width:350px;
            height:200px;
            border-top:1px solid red;
            border-radius:50%;
            left:10px;;
            top:-40px;transform:rotateZ(-60deg) rotateX(180deg);
            }
 .h1:before{transform:rotateZ(60deg);
            content:"";
            position:absolute;
            width:350px;
            height:200px;
            border-bottom:1px solid red;
            border-radius:50%;
            left:-80px;
            margin-top:-40px;
            }

-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;

@-webkit-keyframes AnimationName {
    0%{background-position:43% 0%}
    50%{background-position:58% 100%}
    100%{background-position:43% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:43% 0%}
    50%{background-position:58% 100%}
    100%{background-position:43% 0%}
}
@keyframes AnimationName {
    0%{background-position:43% 0%}
    50%{background-position:58% 100%}
    100%{background-position:43% 0%}
}


    }
  </style>
   
    <div class="woman">
      <div class="lady">
        <div class="pankaj"></div>
       
          <div class="eyebrow1">
              <div class="a1">
                <div class="a2"></div>
             </div>
         </div>
       
       
        <div class="eyebrow2">
              <div class="a3">
                <div class="a4"></div>
             </div>
         </div>
     
        <div class="eye1">
          <div class="uppereye">
            <div class="uppereyeleft"></div>
            <div class="lowereye"></div>
            <div class="lowereyeright"></div>
            <div class="e1"></div>
            <div class="e2"></div>
            <div class="e3"></div>
            <div class="e4"></div>
            <div class="e6"></div>
              <div class="eyeball1">
          <div class="ball"></div>
        </div>
          </div>
         
        </div>
       
       
        <div class="eye2">
          <div class="uppereye1">
            <div class="uppereyeleft"></div>
            <div class="lowereye"></div>
            <div class="lowereyeright"></div>
               <div class="e1"></div>
            <div class="e2"></div>
            <div class="e3"></div>
            <div class="e4"></div>
             <div class="e6"></div>
              <div class="eyeball1">
          <div class="ball"></div>
        </div>
          </div>
       </div>
       
        <div class="nose">
          <div class="base"></div>
          <div class="hole1"></div>
          <div class="hole2"></div>
         
        </div>
       
        <div class="lip">
          <div class="lipleft">
            <div class="round"></div>
          </div>
       
        </div>
       
        <div class="gal1"></div>
        <div class="gal2"></div>
        <div class="hair">
          <div class="h1"></div>
         
         
        </div>
       
       
    </div>
    </div>
   
   
  </body>
 
 
</html>
Code For Css Lady - Codingyan Code For Css Lady - Codingyan Reviewed by Shaishav Anand on July 14, 2019 Rating: 5

You May Also Like

No comments:

Subscribe to: Post Comments ( Atom )
Powered by Blogger.