• 多啦爱梦~多啦A梦CSS3测试源代码


    多啦爱梦~多啦A梦CSS3测试源代码 - 丁竹 - 竹抱苍松
     先直接看图片,感觉一下!一直以来,我们都在说浏览器对CSS3支持度这个问题。可是,鉴于知识认识水平问题,又没几个人真正了解CSS3是什么东西,和它在网站显示上的重要性。现在好了,日本某位大神写了个CSS3的代码,你只需点击进去,看一下你见到的多啦A梦是什么样就知道你的浏览器如何了。
    在给出代码之前,先来个缺点申明(这个很重要,是否看,自己考虑):
    http://yyguangzheng.blog.163.com/blog/static/6034884020151911183756/#
    下面就给出源代码:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS3哆啦A梦测试</title>
    <meta name="description" content="CSS3哆啦A梦测试" />
    <meta name="keywords" content="CSS3,哆啦A梦,CSS3测试" />
    <link rel="stylesheet" type="text/css" href="doraemon.css" media="screen,tv" title="default" />
    <meta http-equiv="adimage" content="200" />
    </head>

    <body>
    <div id="doraemon">
    <div id="face">
    <div id="head_light"></div>
    <div id="eyes">
    <div class="eye eye_left"></div>
    <div class="black_eye black_left"></div>

    <div class="eye eye_right"></div>
    <div class="black_eye black_right"></div>
    </div>
    <div id="base">
    <div id="base_white"></div>
    <div id="nose">
    <div id="nose_light"></div>
    </div>
    <div id="nose_line"></div>
    <div id="mouth"></div>
    <div id="mouth_rewrite"></div>
    <div id="firefox_mouth"></div>

    <div class="whiskers whi_right_top rotate160"></div>
    <div class="whiskers whi_right"></div>
    <div class="whiskers whi_right_bottom rotate20"></div>

    <div class="whiskers whi_left_top rotate20"></div>
    <div class="whiskers whi_left"></div>
    <div class="whiskers whi_left_bottom rotate160"></div>
    </div>
    </div>
    <div id="choker">
    <div id="belt"></div>
    <div id="bell">
    <div id="bell_line"></div>
    <div id="bell_circle"></div>
    <div id="bell_under"></div>
    <div id="bell_light"></div>
    </div>
    </div>
    <div id="body">
    <div id="doutai"></div>
    <div class="base_white2 doutai_center"></div>
    <div id="pocket">
    <div id="circle"></div>
    <div id="circle_rewrite"></div>
    </div>
    </div>
    <div id="hand_right">
    <div id="arm_right"></div>
    <div class="hand_circle hand_right"></div>
    <div class="arm_rewrite_right"></div>
    </div>
    <div id="hand_left">
    <div id="arm_left"></div>
    <div class="hand_circle hand_left"></div>
    <div class="arm_rewrite_left"></div>
    </div>
    <div id="foot">
    <div id="foot_left"></div>
    <div id="foot_right"></div>
    <div id="foot_rewrite"></div>
    </div>
    <div id="shadow_doutai_arm"></div>
    <div id="shadow_doutai_left"></div>
    <div id="shadow_doutai_right"></div>
    <div id="shadow_belt"></div>
    </div>
    </body>
    </html>

    <!--doraemon.css-->

    body{
    background:#fff;
    }

    #doraemon{
    position:relative;
    margin:50px;
    }

    #head_light{
    50px;
    height:50px;
    transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    box-shadow:80px 20px 50px #fff;
    -webkit-box-shadow:80px 20px 55px #fff;
    -moz-box-shadow:80px 20px 50px #fff;
    border-radius:45px;
    -webkit-border-radius:45px;
    -moz-border-radius:60px;
    position:absolute;
    top:-20px;
    left:170px;
    opacity:0.5
    }

    #face{
    position:relative;
    310px;
    height:300px;
    border-radius:146px;
    -webkit-border-radius:146px;
    -moz-border-radius:146px;
    background:#07beea;
    background: -webkit-gradient(linear, right top, left bottom, from(#fff) ,color-stop(0.20, #07beea), color-stop(0.73, #10a6ce),color-stop(0.95, #000), to(#444));
    background: -moz-linear-gradient(right top, #fff,#07beea 20%, #10a6ce 73% ,#000 95% ,#000 155%);
    border:#333 2px solid;
    top:-15px;
    box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
    -webkit-box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
    -moz-box-shadow:-5px 10px 15px rgba(0,0,0,0.45);

    }

    #base{
    position:relative;
    top:-5px;
    }

    #base_white{
    position:absolute;
    border:#000 2px solid;
    264px;
    height:196px;
    border-radius: 150px 150px;
    -webkit-border-radius: 150px 150px;
    -moz-border-radius: 150px 150px;
    background:#FFF;
    background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000));
    background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 83%,#999 90%,#444 95%, #000);
    z-index:1;
    top:85px;
    left:22px;
    }


    #eyes{
    position:relative;
    top:-5px;
    }

    div.eye{
    position:absolute;
    border-radius: 35px 35px;
    -webkit-border-radius: 35px 35px;
    -moz-border-radius: 35px 35px;
    border:2px solid #000;
    72px;
    height:83px;
    z-index:20;
    background:#fff;
    }

    div.black_eye{
    position:absolute;
    15px;
    height:15px;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    background:#333;
    z-index:21;
    -webkit-animation-name: cate;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 200;
    }

    @-webkit-keyframes cate{
    0%{
    margin:0 0 0 0;
    }
    80% {
    margin:0px 0 0 0;
    }
    85% {
    margin:-20px 0 0 0;
    }
    90%{
    margin:0 0 0 0;
    }
    93%{
    margin:0 0 0 7px;
    }
    96%{
    margin:0 0 0 0;
    }
    100%{
    margin:0 0 0 0;
    }
    }

    div.black_left{
    top:100px;
    left:130px;
    }

    div.black_right{
    top:100px;
    left:170px;
    }

    div.eye_left{
    top:45px;
    left:82px;
    }

    div.eye_right{
    top:45px;
    left:156px;
    }

    #nose{
    32px;
    height:32px;
    border:2px solid #000;
    border-radius:50px;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    background:#c93e00;
    position:absolute;
    top:117px;
    left:139px;
    z-index:30;
    }

    #nose_light{
    10px;
    height:10px;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    box-shadow:19px 8px 5px #fff;
    -webkit-box-shadow:19px 8px 5px #fff;
    -moz-box-shadow:19px 8px 5px #fff;
    position:relative;
    top:0px;
    left:0px;
    }

    #nose_line{
    background:#000;
    4px;
    height:100px;
    top:125px;
    left:156px;
    position:absolute;
    }

    #nose_line{
    background:#333;
    3px;
    height:100px;
    top:140px;
    left:155px;
    position:absolute;
    z-index:20;
    }

    #mouth{
    240px;
    height:500px;
    border-bottom:3px solid #333;
    border-radius:120px;
    -webkit-border-radius:120px;
    -moz-border-radius:120px;
    position:absolute;
    top:-263px;
    left:36px;
    z-index:10;
    }

    #mouth_rewrite{
    background:#fff;
    240px;
    height:90px;
    position:relative;
    top:115px;
    left:35px;
    z-index:12;
    border-radius:45px;
    -webkit-border-radius:45px;
    -moz-border-radius:60px;
    }

    #firefox_mouth, x:-moz-broken, x:last-of-type, x:indeterminate {
    position:relative;
    170px;
    height:150px;
    -moz-border-radius:85px;
    border:3px solid #000;
    background:#FFF;
    z-index:11;
    top:-3px;
    left:70px;
    }

    .whiskers{
    background:#333;
    height:2px;
    60px;
    position:absolute;
    z-index:20;
    }
    .whi_right{
    top:165px;
    left:210px;
    }

    .whi_right_top{
    top:145px;
    left:210px;
    }

    .whi_right_bottom{
    top:185px;
    left:210px;
    }

    .whi_left{
    top:165px;
    left:50px;
    }
    .whi_left_top{
    top:145px;
    left:50px;
    }

    .whi_left_bottom{
    top:185px;
    left:50px;
    }

    .rotate20{
    transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    }

    .rotate160{
    transform: rotate(160deg);
    -webkit-transform: rotate(160deg);
    -moz-transform: rotate(160deg);
    -o-transform: rotate(160deg);
    }

    #choker{
    position:relative;
    top:-55px;
    left:35px;
    z-index:100;
    }

    #belt{
    230px;
    height:20px;
    border:#000 solid 2px;
    background:#ca4100;
    background: -webkit-gradient(linear, left top, left bottom, from(#ca4100), to(#800400));
    background: -moz-linear-gradient(top, #ca4100, #800400);
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    position:relative;
    left:5px;
    }

    #bell{
    40px;
    height:40px;
    border-radius:50px;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    border:2px solid #000;
    background:#f9f12a;
    background: -webkit-gradient(linear, left top, left bottom, from(#f9f12a),color-stop(0.5, #e9e11a), to(#a9a100));
    background: -moz-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100);
    box-shadow:-5px 5px 10px rgba(0,0,0,0.25);
    -webkit-box-shadow:-5px 3px 5px rgba(0,0,0,0.25);
    -moz-box-shadow:-5px 5px 10px rgba(0,0,0,0.25);
    position:relative;
    top:-15px;
    left:100px;
    }

    #bell_line{
    36px;
    height:2px;
    background:#f9f12a;
    border:#333 solid 2px;
    position:relative;
    top:10px;
    }

    #bell_circle{
    12px;
    height:10px;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    background:#000;
    position:relative;
    top:14px;
    left:14px;
    }

    #bell_under{
    3px;
    height:15px;
    background:#000;
    position:relative;
    top:10px;
    left:18px;
    }

    #bell_light{
    10px;
    height:10px;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    box-shadow:19px 8px 5px #fff;
    -webkit-box-shadow:19px 8px 5px #fff;
    -moz-box-shadow:19px 8px 5px #fff;
    position:relative;
    opacity:0.7;
    top:-35px;
    left:5px;
    }

    #doutai{
    position:absolute;
    220px;
    height:165px;
    background:#07beea;
    background: -webkit-gradient(linear, right top, left top, from(#07beea),color-stop(0.5, #0073b3),color-stop(0.75,#00b0e0), to(#0096be));
    background: -moz-linear-gradient(right, #07beea, #0073b3 50%,#0096be 75%,#00b0e0 ,#0096be 100% ,#333 114%);
    border:#333 2px solid;
    top:262px;
    left:46px;
    }

    div.base_white2{
    position:absolute;
    170px;
    height:170px;
    border-radius:85px;
    -webkit-border-radius:85px;
    -moz-border-radius:85px;
    border:2px solid #000;
    background:#FFF;
    background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000));
    background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 83%,#999 90%,#444 95%, #000);
    }

    .doutai_center{
    top:230px;
    left:72px;
    }

    #circle{
    position:relative;
    130px;
    height:130px;
    border-radius:65px;
    -webkit-border-radius:65px;
    -moz-border-radius:65px;
    background:#fff;
    background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stop(0.88,#ddd), to(#fff));
    background: -moz-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88% , #fff);
    border:2px solid #000;
    top:-120px;
    left:92px;
    }
    #circle_rewrite{
    position:relative;
    134px;
    height:60px;
    background:#fff;
    border-bottom:2px solid #000;
    top:-250px;
    left:92px;
    }

    #hand_right{
    position:absolute;
    top:272px;
    left:248px;
    100px;
    height:100px;
    }

    #arm_right{
    position:relative;
    80px;
    height:50px;
    background:#07beea;
    background: -webkit-gradient(linear, left top, left bottom, from(#07beea),color-stop(0.85,#07beea), to(#555));
    background: -moz-linear-gradient(top, #07beea, #07beea 85%, #555);

    border:solid 1px #000;
    z-index:-1;
    top:17px;
    transform: rotate(35deg);
    -webkit-transform: rotate(35deg);
    -moz-transform: rotate(35deg);
    -o-transform: rotate(35deg);
    box-shadow:-10px 7px 10px rgba(0,0,0,0.35);
    -webkit-box-shadow:-10px 7px 10px rgba(0,0,0,0.35);
    -moz-box-shadow:-10px 7px 10px rgba(0,0,0,0.35);
    }

    #hand_left{
    position:absolute;
    top:272px;
    left:-46px;
    100px;
    height:100px;
    }

    #arm_left{
    position:relative;
    80px;
    height:50px;
    background:#0096be;
    border:solid 1px #000;
    z-index:-1;
    top:17px;
    left:36px;
    transform: rotate(145deg);
    -webkit-transform: rotate(145deg);
    -moz-transform: rotate(145deg);
    -o-transform: rotate(145deg);
    box-shadow:5px -7px 10px rgba(0,0,0,0.25);
    -webkit-box-shadow:5px -7px 10px rgba(0,0,0,0.25);
    -moz-box-shadow:5px -7px 10px rgba(0,0,0,0.25);
    }

    div.hand_circle{
    position:absolute;
    60px;
    height:60px;
    border-radius:30px;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    border:2px solid #000;
    background:#fff;
    background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.5,#fff),color-stop(0.70,#eee),color-stop(0.8,#ddd), to(#999));
    background: -moz-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999);
    }

    .hand_right{
    top:32px;
    left:40px;
    }

    .arm_rewrite_right{
    position:relative;
    4px;
    height:45px;
    background:#07beea;
    top:-51px;
    left:18px;
    }

    .hand_left{
    top:34px;
    left:10px;
    }

    .arm_rewrite_left{
    position:relative;
    4px;
    height:50px;
    background:#0096be;
    top:-52px;
    left:92px;
    }


    #foot{
    position:relative;
    280px;
    height:40px;
    top:-141px;
    left:20px;
    }

    #foot_left{
    125px;
    height:30px;
    background:#fff;
    background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999));
    background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 85%, #999);
    border:solid 2px #333;
    border-top-left-radius:80px;
    border-bottom-left-radius:40px;
    border-top-right-radius:60px;
    border-bottom-right-radius:60px;
    -webkit-border-top-left-radius:80px;
    -webkit-border-bottom-left-radius:40px;
    -webkit-border-top-right-radius:60px;
    -webkit-border-bottom-right-radius:60px;
    -moz-border-radius-topleft:80px;
    -moz-border-radius-bottomleft:40px;
    -moz-border-radius-topright:60px;
    -moz-border-radius-bottomright:60px;
    position:relative;
    left:8px;
    top:2px;
    box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
    -webkit-box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
    -moz-box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
    z-index:-1;
    }

    #foot_right{
    position:relative;
    125px;
    height:30px;
    background:#fff;
    background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999));
    background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 85%, #999);
    border:solid 2px #333;
    border-top-left-radius:60px;
    border-bottom-left-radius:60px;
    border-top-right-radius:80px;
    border-bottom-right-radius:40px;
    -webkit-border-top-left-radius:60px;
    -webkit-border-bottom-left-radius:60px;
    -webkit-border-top-right-radius:80px;
    -webkit-border-bottom-right-radius:40px;
    -moz-border-radius-topleft:60px;
    -moz-border-radius-bottomleft:60px;
    -moz-border-radius-topright:80px;
    -moz-border-radius-bottomright:40px;
    top:-32px;
    left:141px;
    box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
    -webkit-box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
    -moz-box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
    z-index:-1;
    }

    #foot_rewrite{
    position:relative;
    20px;
    height:10px;
    background:#fff;
    background: -webkit-gradient(linear, right top, left bottom, from(#666),color-stop(0.83,#fff), to(#fff));
    background: -moz-linear-gradient(right top, #666, #fff 83%, #fff);
    top:-76px;
    left:127px;
    border-top:2px solid #000;
    border-right:2px solid #000;
    border-left:2px solid #000;
    border-top-right-radius:40px;
    border-top-left-radius:40px;
    -webkit-border-top-right-radius:40px;
    -webkit-border-top-left-radius:40px;
    -moz-border-radius-topleft:40px;
    -moz-border-radius-topright:40px;
    }

    #shadow_doutai_left{
    30px;
    height:200px;
    box-shadow:-10px 10px 15px rgba(0,0,0,0.45);
    -webkit-box-shadow:-10px 10px 15px rgba(0,0,0,0.45);
    -moz-box-shadow:-10px 10px 15px rgba(0,0,0,0.45);
    position:absolute;
    top:250px;
    left:46px;
    z-index:-10;
    }

    #shadow_doutai_right{
    30px;
    height:200px;
    box-shadow:10px 10px 15px rgba(0,0,0,0.35);
    -webkit-box-shadow:10px 10px 25px rgba(0,0,0,0.35);
    -moz-box-shadow:10px 10px 15px rgba(0,0,0,0.35);
    position:absolute;
    top:240px;
    left:230px;
    z-index:-10;
    }

    #shadow_doutai_arm{
    85px;
    height:165px;
    box-shadow:-100px 10px 15px rgba(0,0,0,0.0);
    -webkit-box-shadow:-100px 10px 15px rgba(0,0,0,0.25);
    -moz-box-shadow:-100px 10px 15px rgba(0,0,0,0.25);
    position:absolute;
    top:230px;
    left:113px;
    z-index:10;
    opacity:0.5;
    transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    border-bottom-left-radius:40px;
    -webkit-border-bottom-left-radius:40px;
    -moz-border-radius-bottomleft:40px;
    border-top-left-radius:20px;
    -webkit-border-top-left-radius:20px;
    -moz-border-radius-topleft:20px;
    }

    #shadow_belt{
    40px;
    height:30px;
    box-shadow:-100px 10px 15px rgba(0,0,0,0);
    -webkit-box-shadow:-100px 10px 15px rgba(0,0,0,0.25);
    -moz-box-shadow:-100px 10px 15px rgba(0,0,0,0.25);
    position:absolute;
    top:240px;
    left:130px;
    z-index:10;
    border-bottom-left-radius:40px;
    -webkit-border-bottom-left-radius:40px;
    -moz-border-radius-bottomleft:40px;
    z-index:300;
    }

    #arm_left:not(*|*), .arm_rewrite_left:not(*|*){
    background:#07beea;
    }

    #arm_left, .arm_rewrite_left{
    background:#07beea9;
    *background:#07beea;
    _background:#07beea;
    }

    #kiji{
    position:relative;
    top:-150px;
    }


  • 相关阅读:
    最大流——poj3308 (模板)
    混合边的欧拉路径——poj1637 最大流
    JBPM FAQ
    spring 读取资源文件方法
    JBPM使用assignHandler进行用户分派思路
    直接修改jpbm xml流程定义字段的方法
    转 java 读取文件的字符集
    JAVA实现AD验证
    找到一篇jbpm session closed解决办法的文章
    dwr 读取cookie
  • 原文地址:https://www.cnblogs.com/herbertchina/p/4306790.html
Copyright © 2020-2023  润新知