{"id":1055,"date":"2017-03-15T13:20:21","date_gmt":"2017-03-15T05:20:21","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=1055"},"modified":"2017-03-15T13:20:21","modified_gmt":"2017-03-15T05:20:21","slug":"css3%e5%ae%9e%e7%8e%b0%e5%8d%a1%e9%80%9a%e5%a4%a7%e7%99%bd","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=1055","title":{"rendered":"css3\u5b9e\u73b0\u5361\u901a\u5927\u767d"},"content":{"rendered":"
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <title>\u5361\u901acss\u5927\u767d<\/title>\r\n  <script type=\"text\/javascript\" src=\"jquery.min.js\"><\/script>\r\n<\/head>\r\n<style type=\"text\/css\">\r\n  *{\r\n    margin:0;\r\n    padding:0;\r\n    list-style: none;\r\n  }\r\n  body{background: #af2024;}\r\n  .wrap{\r\n    width: 500px;\r\n    height: 700px;\r\n    margin:0 auto;\r\n    position: relative;\r\n  }\r\n\r\n  \/* \u5934\u90e8 *\/\r\n  .header{\r\n    width: 114px;\r\n    height: 76px;\r\n    background: -webkit-linear-gradient(top,#fff 50%,#d6d6d6 100%);\r\n    background: linear-gradient(top,#fff 50%,#d6d6d6 100%);\r\n    border-radius: 50% 50% 45% 45%;\r\n    position: relative;\r\n    margin:0 auto;\r\n    top: 60px;\r\n      box-shadow: 0 5px 5px rgba(0,0,0,0.2);\r\n      z-index:400;\r\n      animation:turn 6s infinite;\r\n      -webkit-animation:turn 6s infinite;\r\n  }\r\n  .eyeLeft{\r\n    width: 14px;\r\n    height: 14px;\r\n    background: #333;\r\n    border-radius: 50%;\r\n    position: absolute;\r\n    left:23px;\r\n    top:30px;\r\n    animation:nication 2.3s ease infinite;\r\n    -webkit-animation:nication 2.3s ease infinite;\r\n  }\r\n  .eyeRight{\r\n    width: 14px;\r\n    height: 14px;\r\n    background: #333;\r\n    border-radius: 50%;\r\n    position: absolute;\r\n    left:74px;\r\n    top:30px;\r\n    animation:nication 2.3s ease infinite;\r\n    -webkit-animation:nication 2.3s ease infinite;\r\n  }\r\n  @keyframes nication{\r\n    0%,20%, 100%{\r\n      -webkit-transform:scale(1,1);\r\n      transform:scale(1,1);\r\n    }\r\n    10%{\r\n      -webkit-transform:scale(1,0.2);\r\n      transform:scale(1,0.2);\r\n    }\r\n  }\r\n  @-webkit-keyframes nication{\r\n    0%,20%, 100%{\r\n      -webkit-transform:scale(1,1);\r\n      transform:scale(1,1);\r\n    }\r\n    10%{\r\n      -webkit-transform:scale(1,0.2);\r\n      transform:scale(1,0.2);\r\n    }\r\n  }\r\n  @keyframes turn{\r\n    0%,10%,20%,30%,80%,90%,100%{\r\n      -webkit-transform:rotate(0deg);\r\n      transform:rotate(0deg);\r\n    }\r\n    35%,40%,45%,50%,55%,65%,75%{\r\n      -webkit-transform:rotate(5deg);\r\n      transform:rotate(5deg);\r\n    }\r\n  }\r\n  @-webkit-keyframes turn{\r\n    0%,10%,20%,30%,80%,90%,100%{\r\n      -webkit-transform:rotate(0deg);\r\n      transform:rotate(0deg);\r\n    }\r\n    35%,40%,45%,50%,55%,65%,70%,75%{\r\n      -webkit-transform:rotate(5deg);\r\n      transform:rotate(5deg);\r\n    }\r\n  }\r\n  .eyeMouth{\r\n    width: 55px;\r\n    height: 5px;\r\n    border-radius: 50%;\r\n    box-shadow: 0 1.5px 0 #333;\r\n    position: absolute;\r\n    top:33px;\r\n    left: 30px;\r\n  }\r\n\r\n  \/* \u8eab\u4f53 *\/\r\n  .body_top{\r\n    width: 226px;\r\n      height: 160px;\r\n      background: -webkit-linear-gradient(top, #f9f9f9 30%, #f1f2ed 60%, #eee 90%);\r\n      background: linear-gradient(top, #f9f9f9 30%, #f1f2ed 60%, #eee 90%);\r\n      border-radius: 105px 105px 5px 5px;\r\n      position: absolute;\r\n      top:118px;\r\n      left: 135px;\r\n      z-index:200;\r\n  }\r\n  .body_top_heart{\r\n    width: 30px;\r\n    height: 30px;\r\n    background: #eee;\r\n    border-radius: 50%;\r\n    position: absolute;\r\n    top:60px;\r\n    left: 155px;\r\n    box-shadow: 0px 3px 1px rgba(0,0,0,.1), 0px 3px 2px rgba(255,255,255,1) inset;\r\n    -webkit-transform:skew(10deg,0) rotate(10deg);\r\n        transform:skew(10deg,0) rotate(10deg);\r\n        overflow: hidden;\r\n        cursor: pointer;\r\n  }\r\n  .body_top_heart>span{\r\n      width: 8px;\r\n      height: 1px;\r\n      background: rgba(0,0,0,0.1);\r\n      position: absolute;\r\n  }\r\n  .body_top_heart>span:nth-child(1){\r\n    top:17px;\r\n    left: 0px;\r\n  }\r\n  .body_top_heart>span:nth-child(2){\r\n    width: 6px;\r\n      left: 7px;\r\n      top: 15px;\r\n      transform: rotate(-45deg);\r\n  }\r\n  .body_top_heart>span:nth-child(3){\r\n    width: 8px;\r\n      left: 12px;\r\n      top: 13px;\r\n      transform: rotate(0deg);\r\n  }\r\n  .body_top_heart>span:nth-child(4){\r\n      width: 6px;\r\n      left: 19px;\r\n      top: 15px;\r\n      transform: rotate(45deg);\r\n  }\r\n  .body_top_heart>span:nth-child(5){\r\n      left: 24px;\r\n      top:17px;\r\n  }\r\n  .body_middle_left{\r\n    width: 200px;\r\n    height: 280px;\r\n    background: #eee;\r\n    position: absolute;\r\n    top:200px;\r\n    left: 115px;\r\n    border-radius: 15% 30%;\r\n    transform: rotate(10deg);\r\n      box-shadow: -3px 0 3px rgba(0,0,0,0.1);\r\n      z-index:100;\r\n  }\r\n  .body_middle_right{\r\n    width: 200px;\r\n    height: 280px;\r\n    background: #eee;\r\n    position: absolute;\r\n    top:200px;\r\n    left: 180px;\r\n    border-radius: 30% 15%;\r\n    transform: rotate(-10deg);\r\n      box-shadow: 3px 0 3px rgba(0,0,0,0.1);\r\n      z-index:100;\r\n  }\r\n  .body_tummy{\r\n    width: 286px;\r\n    height: 233px;\r\n    border-radius: 50%;\r\n    position: absolute;\r\n    top:290px;\r\n    left: 103px;\r\n      background: -webkit-linear-gradient(top, #eee 50%,#d2d2d2 100%);\r\n      background: linear-gradient(top, #eee 50%,#d2d2d2 100%);\r\n      box-shadow: 0px 5px 5px rgba(0,0,0,.2);\r\n      z-index:300;\r\n  }\r\n  .body_foot_left{\r\n    width: 118px;\r\n    height: 180px;\r\n    position: absolute;\r\n    top:450px;\r\n    left:132px;\r\n      background:#eee;\r\n      border-radius: 10% 20% 18% 58%;\r\n      box-shadow:-1px 0px 8px rgba(0,0,0,0.2) inset;\r\n      z-index: 20;\r\n  }\r\n  .body_foot_right{\r\n    width: 118px;\r\n    height: 180px;\r\n    position: absolute;\r\n    top:450px;\r\n    left:250px;\r\n      background:#eee;\r\n      border-radius: 18% 10% 58% 20%;\r\n      box-shadow:1px 0px 8px rgba(0,0,0,0.2) inset;\r\n      z-index: 20;\r\n  }\r\n  .head .head_left1{\r\n    width: 260px;\r\n    height: 150px;\r\n    background: #eee;\r\n    position: absolute;\r\n    top: 170px;\r\n      left: 36px;\r\n    transform: rotate(-48deg);\r\n      border-radius: 50%;\r\n  }\r\n  .head .head_left2{\r\n    width: 100px;\r\n    height: 237px;\r\n    background: #eee;\r\n    position: absolute;\r\n    top:215px;\r\n    left: 56px;\r\n    transform: rotate(2deg);\r\n      border-radius: 50%;\r\n  }\r\n  .head .head_right1{\r\n    width: 260px;\r\n    height: 150px;\r\n    background: #eee;\r\n    position: absolute;\r\n    top: 170px;\r\n      left: 200px;\r\n      transform: rotate(48deg);\r\n      border-radius: 50%;\r\n  }\r\n  .head .head_right2{\r\n    width: 100px;\r\n    height: 237px;\r\n    background: #eee;\r\n    position: absolute;\r\n    top:215px;\r\n    left: 338px;\r\n    transform: rotate(-2deg);\r\n      border-radius: 50%;\r\n  }\r\n  .body_shadow{\r\n      width: 100px;\r\n      height: 80px;\r\n      position: absolute;\r\n      bottom: 100px;\r\n      left: 180px;\r\n  }\r\n  .body_shadow:before{\r\n    content: '';\r\n    width: 150px;\r\n    height: 80px;\r\n    position: absolute;\r\n    bottom:0px;\r\n    left: 125px;\r\n      box-shadow: -200px 70px 30px rgba(160,28,32,0.58);\r\n  }\r\n  .body_shadow:after{\r\n    content: '';\r\n    width: 150px;\r\n    height: 80px;\r\n    position: absolute;\r\n    bottom:0px;\r\n    left: 273px;\r\n      box-shadow: -200px 70px 30px rgba(160,28,32,0.58);\r\n  }\r\n  .body_display{\r\n    width: 135px;\r\n    height:0px;\r\n    background: #f3f3f3;\r\n    position: absolute;\r\n    top:320px;\r\n    left:170px;\r\n    z-index:99999;\r\n    box-shadow: 1px 1px 5px #eee inset;\r\n    font-size: 12px;\r\n    font-family: \\5FAE\\8F6F\\96C5\\9ED1;\r\n    line-height: 25px;\r\n    letter-spacing: 2px;\r\n    color: #a2a2a2;\r\n    overflow: hidden;\r\n  }\r\n<\/style>\r\n<body>\r\n  <div>\r\n    <div>\r\n      <div><\/div>\r\n      <div><\/div>\r\n      <div><\/div>\r\n    <\/div>\r\n    <div>\r\n      <!-- \u8eab\u4f53\u4e0a\u90e8\u5206 -->\r\n      <div>\r\n        <!-- \u5fc3\u810f\u90e8\u4f4d -->\r\n        <div id=\"TUMMY\">\r\n          <span><\/span>\r\n          <span><\/span>\r\n          <span><\/span>\r\n          <span><\/span>\r\n          <span><\/span>\r\n        <\/div>\r\n      <\/div>\r\n      <!-- \u8eab\u4f53\u4e2d\u95f4\u90e8\u5206 -->\r\n      <div>\r\n        <div><\/div>\r\n        <div><\/div>\r\n      <\/div>\r\n      <!-- \u8eab\u4f53\u4e2d\u95f4\u809a\u5b50 -->\r\n      <div><\/div>\r\n      <!-- \u8eab\u4f53\u809a\u5b50\u4e0a\u7684\u663e\u793a\u5757 -->\r\n      <div id=\"SHOW\"><\/div>\r\n      <p hidden id=\"TELL\">\u60a8\u597d\uff01\u6211\u662f\u5927\u767d,\u60a8\u7684\u79c1\u4eba\u5065\u5eb7\u52a9\u7406\uff01<\/p>\r\n      <!-- \u8eab\u4f53\u624b\u90e8\u5206 -->\r\n      <div>\r\n        <div>\r\n          <div><\/div>\r\n          <div><\/div>\r\n        <\/div>\r\n        <div>\r\n          <div><\/div>\r\n          <div><\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <!-- \u8eab\u4f53\u811a\u90e8\u5206 -->\r\n      <div>\r\n        <!-- \u5de6\u8fb9 -->\r\n        <div><\/div>\r\n        <div><\/div>\r\n      <\/div>\r\n      <!-- \u8eab\u4f53\u9634\u5f71 -->\r\n      <div><\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » css3\u5b9e\u73b0\u5361\u901a\u5927\u767d<\/a><\/p>","protected":false},"excerpt":{"rendered":"
<!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>\u5361\u901acss\u5927\u767d&lt […]<\/p>\n","protected":false},"author":1,"featured_media":324,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[12],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/1055"}],"collection":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1055"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/1055\/revisions"}],"predecessor-version":[{"id":1056,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/1055\/revisions\/1056"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/media\/324"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1055"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1055"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1055"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}