css3实现卡通大白

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>卡通css大白</title>
  <script type="text/javascript" src="jquery.min.js"></script>
</head>
<style type="text/css">
  *{
    margin:0;
    padding:0;
    list-style: none;
  }
  body{background: #af2024;}
  .wrap{
    width: 500px;
    height: 700px;
    margin:0 auto;
    position: relative;
  }

  /* 头部 */
  .header{
    width: 114px;
    height: 76px;
    background: -webkit-linear-gradient(top,#fff 50%,#d6d6d6 100%);
    background: linear-gradient(top,#fff 50%,#d6d6d6 100%);
    border-radius: 50% 50% 45% 45%;
    position: relative;
    margin:0 auto;
    top: 60px;
      box-shadow: 0 5px 5px rgba(0,0,0,0.2);
      z-index:400;
      animation:turn 6s infinite;
      -webkit-animation:turn 6s infinite;
  }
  .eyeLeft{
    width: 14px;
    height: 14px;
    background: #333;
    border-radius: 50%;
    position: absolute;
    left:23px;
    top:30px;
    animation:nication 2.3s ease infinite;
    -webkit-animation:nication 2.3s ease infinite;
  }
  .eyeRight{
    width: 14px;
    height: 14px;
    background: #333;
    border-radius: 50%;
    position: absolute;
    left:74px;
    top:30px;
    animation:nication 2.3s ease infinite;
    -webkit-animation:nication 2.3s ease infinite;
  }
  @keyframes nication{
    0%,20%, 100%{
      -webkit-transform:scale(1,1);
      transform:scale(1,1);
    }
    10%{
      -webkit-transform:scale(1,0.2);
      transform:scale(1,0.2);
    }
  }
  @-webkit-keyframes nication{
    0%,20%, 100%{
      -webkit-transform:scale(1,1);
      transform:scale(1,1);
    }
    10%{
      -webkit-transform:scale(1,0.2);
      transform:scale(1,0.2);
    }
  }
  @keyframes turn{
    0%,10%,20%,30%,80%,90%,100%{
      -webkit-transform:rotate(0deg);
      transform:rotate(0deg);
    }
    35%,40%,45%,50%,55%,65%,75%{
      -webkit-transform:rotate(5deg);
      transform:rotate(5deg);
    }
  }
  @-webkit-keyframes turn{
    0%,10%,20%,30%,80%,90%,100%{
      -webkit-transform:rotate(0deg);
      transform:rotate(0deg);
    }
    35%,40%,45%,50%,55%,65%,70%,75%{
      -webkit-transform:rotate(5deg);
      transform:rotate(5deg);
    }
  }
  .eyeMouth{
    width: 55px;
    height: 5px;
    border-radius: 50%;
    box-shadow: 0 1.5px 0 #333;
    position: absolute;
    top:33px;
    left: 30px;
  }

  /* 身体 */
  .body_top{
    width: 226px;
      height: 160px;
      background: -webkit-linear-gradient(top, #f9f9f9 30%, #f1f2ed 60%, #eee 90%);
      background: linear-gradient(top, #f9f9f9 30%, #f1f2ed 60%, #eee 90%);
      border-radius: 105px 105px 5px 5px;
      position: absolute;
      top:118px;
      left: 135px;
      z-index:200;
  }
  .body_top_heart{
    width: 30px;
    height: 30px;
    background: #eee;
    border-radius: 50%;
    position: absolute;
    top:60px;
    left: 155px;
    box-shadow: 0px 3px 1px rgba(0,0,0,.1), 0px 3px 2px rgba(255,255,255,1) inset;
    -webkit-transform:skew(10deg,0) rotate(10deg);
        transform:skew(10deg,0) rotate(10deg);
        overflow: hidden;
        cursor: pointer;
  }
  .body_top_heart>span{
      width: 8px;
      height: 1px;
      background: rgba(0,0,0,0.1);
      position: absolute;
  }
  .body_top_heart>span:nth-child(1){
    top:17px;
    left: 0px;
  }
  .body_top_heart>span:nth-child(2){
    width: 6px;
      left: 7px;
      top: 15px;
      transform: rotate(-45deg);
  }
  .body_top_heart>span:nth-child(3){
    width: 8px;
      left: 12px;
      top: 13px;
      transform: rotate(0deg);
  }
  .body_top_heart>span:nth-child(4){
      width: 6px;
      left: 19px;
      top: 15px;
      transform: rotate(45deg);
  }
  .body_top_heart>span:nth-child(5){
      left: 24px;
      top:17px;
  }
  .body_middle_left{
    width: 200px;
    height: 280px;
    background: #eee;
    position: absolute;
    top:200px;
    left: 115px;
    border-radius: 15% 30%;
    transform: rotate(10deg);
      box-shadow: -3px 0 3px rgba(0,0,0,0.1);
      z-index:100;
  }
  .body_middle_right{
    width: 200px;
    height: 280px;
    background: #eee;
    position: absolute;
    top:200px;
    left: 180px;
    border-radius: 30% 15%;
    transform: rotate(-10deg);
      box-shadow: 3px 0 3px rgba(0,0,0,0.1);
      z-index:100;
  }
  .body_tummy{
    width: 286px;
    height: 233px;
    border-radius: 50%;
    position: absolute;
    top:290px;
    left: 103px;
      background: -webkit-linear-gradient(top, #eee 50%,#d2d2d2 100%);
      background: linear-gradient(top, #eee 50%,#d2d2d2 100%);
      box-shadow: 0px 5px 5px rgba(0,0,0,.2);
      z-index:300;
  }
  .body_foot_left{
    width: 118px;
    height: 180px;
    position: absolute;
    top:450px;
    left:132px;
      background:#eee;
      border-radius: 10% 20% 18% 58%;
      box-shadow:-1px 0px 8px rgba(0,0,0,0.2) inset;
      z-index: 20;
  }
  .body_foot_right{
    width: 118px;
    height: 180px;
    position: absolute;
    top:450px;
    left:250px;
      background:#eee;
      border-radius: 18% 10% 58% 20%;
      box-shadow:1px 0px 8px rgba(0,0,0,0.2) inset;
      z-index: 20;
  }
  .head .head_left1{
    width: 260px;
    height: 150px;
    background: #eee;
    position: absolute;
    top: 170px;
      left: 36px;
    transform: rotate(-48deg);
      border-radius: 50%;
  }
  .head .head_left2{
    width: 100px;
    height: 237px;
    background: #eee;
    position: absolute;
    top:215px;
    left: 56px;
    transform: rotate(2deg);
      border-radius: 50%;
  }
  .head .head_right1{
    width: 260px;
    height: 150px;
    background: #eee;
    position: absolute;
    top: 170px;
      left: 200px;
      transform: rotate(48deg);
      border-radius: 50%;
  }
  .head .head_right2{
    width: 100px;
    height: 237px;
    background: #eee;
    position: absolute;
    top:215px;
    left: 338px;
    transform: rotate(-2deg);
      border-radius: 50%;
  }
  .body_shadow{
      width: 100px;
      height: 80px;
      position: absolute;
      bottom: 100px;
      left: 180px;
  }
  .body_shadow:before{
    content: '';
    width: 150px;
    height: 80px;
    position: absolute;
    bottom:0px;
    left: 125px;
      box-shadow: -200px 70px 30px rgba(160,28,32,0.58);
  }
  .body_shadow:after{
    content: '';
    width: 150px;
    height: 80px;
    position: absolute;
    bottom:0px;
    left: 273px;
      box-shadow: -200px 70px 30px rgba(160,28,32,0.58);
  }
  .body_display{
    width: 135px;
    height:0px;
    background: #f3f3f3;
    position: absolute;
    top:320px;
    left:170px;
    z-index:99999;
    box-shadow: 1px 1px 5px #eee inset;
    font-size: 12px;
    font-family: \5FAE\8F6F\96C5\9ED1;
    line-height: 25px;
    letter-spacing: 2px;
    color: #a2a2a2;
    overflow: hidden;
  }
</style>
<body>
  <div>
    <div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <!-- 身体上部分 -->
      <div>
        <!-- 心脏部位 -->
        <div id="TUMMY">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
      <!-- 身体中间部分 -->
      <div>
        <div></div>
        <div></div>
      </div>
      <!-- 身体中间肚子 -->
      <div></div>
      <!-- 身体肚子上的显示块 -->
      <div id="SHOW"></div>
      <p hidden id="TELL">您好!我是大白,您的私人健康助理!</p>
      <!-- 身体手部分 -->
      <div>
        <div>
          <div></div>
          <div></div>
        </div>
        <div>
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 身体脚部分 -->
      <div>
        <!-- 左边 -->
        <div></div>
        <div></div>
      </div>
      <!-- 身体阴影 -->
      <div></div>
    </div>
  </div>
</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » css3实现卡通大白

赞 (3)
分享到:更多 ()

发表评论 0