[转载]CSS3画的机器猫,CSS3很强大啊

现在的位置: 首页 > 综合 > 正文

[转载]CSS3画的机器猫,CSS3很强大啊

2012年05月30日 ⁄ 综合 ⁄ 共 5568字 ⁄ 字号小中大 ⁄ 评论关闭

代码

<!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 - 有图有真相</title>
<meta name="description"
content="CSS3 - 有图有真相">
<meta http-equiv="adimage" content="200">
<style>
body{
    background:#fff;
    width:901px;
    margin:auto;
}
#doraemon{
    position:fixed;
    margin:50px;
    float:left;
    width:500px;
}
#instr{
    float:right;
    width:400px;
    font-size:14px;
    border-left:2px solid black;
    padding-left:20px;
}
#head_light{
    width: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;
    width: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;
    width: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;
    width:72px;
    height:83px;
    z-index:20;
    background:#fff;
}
div.black_eye{
    position:absolute;
    width: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: 3s;
        -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{
    width: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{
    width: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;
    width:4px;
    height:100px;
    top:125px;
    left:156px;
    position:absolute;
}
#nose_line{
    background:#333;
    width:3px;
    height:100px;
    top:140px;
    left:155px;
    position:absolute;
        z-index:20;
}
#mouth{
    width: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;
    width: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;
    width: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;
    width: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(16

【上篇】Qt中的QTableWidget
【下篇】从MapX到MapXtreme2004[10]-根据zoom值修改显示范围

作者: shielded

该日志由 shielded 于12年前发表在综合分类下，最后更新于 2012年05月30日.
转载请注明: [转载]CSS3画的机器猫,CSS3很强大啊 | 学步园 +复制链接

抱歉!评论已关闭.

返回首页

（其他合作也可洽谈）

必威体育

必威电竞

学步园