• CSS3/HTML5代码实例,实现一个可爱的叮当猫图案,如果浏览器不支持CSS3的话,也是可以显示出猫的图案,不过效果当然不如支持HTML5的浏览器,比如火狐、Chrome下表现完美,学习CSS3或HTML5你可不要错过哦。



<!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 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(160deg);

-o-transform: rotate(160deg);

}

#choker{

position:relative;

top:-55px;

left:35px;

z-index:100;

}

#belt{

width: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{

width: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{

width:36px;

height:2px;

background:#f9f12a;

border:#333 solid 2px;

position:relative;

top:10px;

}

#bell_circle{

width:12px;

height:10px;

border-radius:5px;

-webkit-border-radius:5px;

-moz-border-radius:5px;

background:#000;

position:relative;

top:14px;

left:14px;

}

#bell_under{

width:3px;

height:15px;

background:#000;

position:relative;

top:10px;

left:18px;

}

#bell_light{

width: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;

width: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;

width: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;

width:130px;

height:130px;

border-radius:65px;

-webkit-border-radius:65px;

-moz-border-radius:65px;