Rumah >hujung hadapan web >tutorial css >使用css3实现多啦A梦代码
使用css3实现多啦A梦代码
- 高洛峰asal
- 2017-03-28 10:15:111754semak imbas
这篇文章主要为大家介绍使用css3实现多啦A梦代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><p class="doraemon"> <p class="head"> <p class="eyes"> <p class="eye left"><p class="black bleft"></p></p> <p class="eye right"><p class="black bright"></p></p> </p> <p class="face"> <p class="white"></p> <p class="nose"><p class="light"></p></p> <p class="nose_line"></p> <p class="mouth"></p> <p class="mouth"></p> <p class="whiskers"> <p class="whisker rTop r160"></p> <p class="whisker rt"></p> <p class="whisker rBottom r20"></p> <p class="whisker lTop r20"></p> <p class="whisker lt"></p> <p class="whisker lBottom r160"></p> </p> </p> </p> <p class="choker"> <p class="bell"> <p class="bell_line"></p> <p class="bell_circle"></p> <p class="bell_under"></p> <p class="bell_light"></p> </p> </p> <p class="bodys"> <p class="body"></p> <p class="wraps"></p> <p class="pocket"></p> <p class="pocket_mask"></p> </p> <p class="hand_right"> <p class="arm"></p> <p class="circle"></p> <p class="arm_rewrite"></p> </p> <p class="hand_left"> <p class="arm"></p> <p class="circle"></p> <p class="arm_rewrite"></p> </p> <p class="foot"> <p class="left"></p> <p class="right"></p> <p class="foot_rewrite"></p> </p> </p></p></body></html>
<style>
.doraemon{
position: relative;
width:500px;
margin:0 auto;
}
.doraemon .head{
width:320px;
height: 300px;
border-radius: 150px;
background: #07bbee;
background: -webkit-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);
background: -moz-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);
background: -ms-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);
border:#555 2px solid;
box-shadow: -5px 10px 15px rgba(0,0,0,0.45);
position: relative;
} /*眼睛*/
.doraemon .eyes{
position:relative;
}
.doraemon .eyes .eye{
width:72px;
height: 82px;
position:absolute;
top:40px;
background: #fff;
border: 2px solid #000;
border-radius: 35px 35px;
z-index: 10;
}
.doraemon .eyes .eye .black{
width:14px;
height: 14px;
background: #000;
border-radius:14px;
position: relative;
top:40px;
}
.doraemon .eyes .left{
left:82px;
}
.doraemon .eyes .right{
left:156px;
}
.doraemon .eyes .eye .bleft{
left: 50px;
}
.doraemon .eyes .eye .bright{
left:7px;
}
.doraemon .face{
position: relative;
z-index: 2;
} /*自然底色*/
.doraemon .face .white{
border:2px #000 solid;
width:265px;
height: 195px;
border-radius: 150px 150px;
position:absolute;
top:75px;
left:25px;
background: #fff;
background: -webkit-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);
background: -moz-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);
background: -ms-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);
} /*鼻子*/
.doraemon .face .nose{
width:30px;
height: 30px;
background: #c93300;
border:2px solid #000;
border-radius: 30px;
position:absolute;
top:110px;
left:140px;
z-index: 3;
} /*鼻子上面的光*/
.doraemon .face .nose .light{
border-radius: 5px ;
box-shadow: 19px 8px 5px #fff;
height: 10px ;
width:10px;
} /*鼻子下面的线*/
.doraemon .face .nose_line {
width:3px;
height: 100px;
background: #333;
position:absolute;
top:143px;
left:155px;
z-index: 3;
} /*嘴巴*/
.doraemon .face .mouth{
width:220px;
height: 400px;
border-bottom: 3px solid #333;
border-radius: 120px;
position:absolute;
top:-160px;
left: 45px;
} /*胡须*/
.doraemon .whiskers{
background: #fff;
width:220px;
height: 80px;
position:relative;
top:120px;
left:45px;
border-radius: 15px;
z-index: 2;
}
.doraemon .whiskers .whisker{
background: #333;
height: 2px;
width:60px;
position: absolute;
z-index: 2;
}
.doraemon .whiskers .rTop{
left:165px;
top: 25px;
}
.doraemon .whiskers .rt{
left: 167px;
top:45px;
}
.doraemon .whiskers .rBottom{
left: 165px;
top: 65px;
}
.doraemon .whiskers .lTop{
left:0;
top:25px;
}
.doraemon .whiskers .lt{
top:45px;
left:-2px;
}
.doraemon .whiskers .lBottom{
top:65px;
left:0;
}
.doraemon .whiskers .r160 {
transform: rotate(160deg);
-webkit-transform: rotate(160deg);
}
.doraemon .whiskers .r20{
transform: rotate(20deg);
-webkit-transform: rotate(20deg);
} /*围脖*/.doraemon .choker{
position: relative;z-index:4;
top: -40px;left: 45px;
background:#C40; /*线性渐变 让围巾看上去更自然*/
background: -webkit-gradient(linear,left top,left bottom,from(#C40),to(#800400));
background: -moz-linear-gradient(center top,#C40,#800400);
background: -ms-linear-gradient(center top,#C40,#800400);
border: 2px solid #000000;
border-radius: 10px 10px 10px 10px;
height: 20px;width: 230px;
}/*铃铛*/.doraemon .choker .bell{
width:40px;height:40px; _overflow:hidden;/*IE6 hack*/
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);
background: -ms-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100);
box-shadow:-5px 5px 10px rgba(0,0,0,0.25);
position:relative;
top:5px;left:90px;
}/*双横线*/.doraemon .choker .bell_line{
background:#F9F12A;
border-radius: 3px 3px 0px 0px;
border: 2px solid #333333;
height: 2px;width: 36px;
position: relative;top: 10px;
}/*黑点*/.doraemon .choker .bell_circle {
background:#000;
border-radius: 5px;
height: 10px;
width: 12px;
position: relative;
top: 14px; left: 14px;
}/*黑点下的线*/.doraemon .choker .bell_under {
background:#000;
height: 15px;width: 3px;
left: 18px;top: 10px;
position: relative;
}/*高光*/.doraemon .choker .bell_light {
border-radius: 10px;
box-shadow: 19px 8px 5px #FFF;
height:12px;width:12px;
left: 5px;top: -35px;
position: relative;
opacity: 0.7;
}.doraemon .bodys{position: relative;top:-310px;}/*肚子*/.doraemon .bodys .body{
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 center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);
background: -ms-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);
border: 2px solid #333;
height: 165px;width: 220px;
position: absolute;
left: 50px;top:265px;
}/*白色肚兜*/.doraemon .bodys .wraps{
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);
background: -ms-linear-gradient(right top,#FFF,#FFF 75%,#EEE 83%,#999 90%,#444 95%,#000);
border: 2px solid #000;
border-radius: 85px;
position: absolute;
height:170px;width:170px;
left:72px;top:230px;
}/*口袋*/.doraemon .bodys .pocket{
position:relative;
width:130px;height:130px;
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);
background: -ms-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88% , #fff);
border:2px solid #000;
top:250px;left:92px;
}/*挡住口袋一半*/.doraemon .bodys .pocket_mask{
position:relative;
width:134px;height:60px;
background:#fff;
border-bottom:2px solid #000;
top:125px;left:92px;
}/*右手*/.doraemon .hand_right{
height: 100px;width: 100px;
position: absolute;
top: 272px;left: 248px;
}/*左手*/.doraemon .hand_left{
height: 100px;width: 100px;
position: absolute;
top: 272px;left:-10px;
}/*手臂公共部分*/.doraemon .arm {
background:#07BEEA;
background: -webkit-gradient(linear, left top, left bottom, from(#07beea),color-stop(0.85,#07beea), to(#555));
background: -moz-linear-gradient(center top , #07BEEA, #07BEEA 85%, #555);
background: -ms-linear-gradient(center top , #07BEEA, #07BEEA 85%, #555);
border: 1px solid #000000;
box-shadow: -10px 7px 10px rgba(0, 0, 0, 0.35);
height: 50px;width: 80px;
z-index:-1;position: relative;
}/*右手手臂*/.doraemon .hand_right .arm {
top: 17px;
transform: rotate(35deg);-webkit-transform:rotate(35deg);
}/*左手手臂*/.doraemon .hand_left .arm {
top: 17px;background:#0096BE;box-shadow: 5px -7px 10px rgba(0, 0, 0, 0.25);
transform: rotate(145deg);-webkit-transform:rotate(145deg);
}/*圆形手掌公共部分*/.doraemon .circle{
position:absolute;
width:60px;height:60px;
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);
}/*右手手掌*/.doraemon .hand_right .circle{
left:40px;top:32px;
}/*左手手掌*/.doraemon .hand_left .circle{
left:-20px;top:32px;
}/*手臂和身体结合处*/.doraemon .arm_rewrite{
background:#07BEEA;
height: 45px;width:5px;
position: relative;
}/*右手结合处*/.doraemon .hand_right .arm_rewrite{
top: -45px;left:22px;
}/*左手结合处*/.doraemon .hand_left .arm_rewrite{
top: -45px;left:60px;background:#0096be}/*脚*/.doraemon .foot {
height: 40px;
left: 20px;
position: relative;
top: -141px;
width: 280px;
}/*左脚*/.doraemon .foot .left {
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);
background: -ms-linear-gradient(right top , #fff, #fff 75%, #EEE 85%, #999);
border: 2px solid #333;
border-radius: 80px 60px 60px 40px;
box-shadow: -6px 0 10px rgba(0, 0, 0, 0.35);
height: 30px;
left: 8px;
position: relative;
top:65px;
width: 125px;
}/*右脚*/.doraemon .foot .right {
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);
background: -ms-linear-gradient(right top , #fff, #fff 75%, #EEE 85%, #999);
border: 2px solid #333;
border-radius: 80px 60px 60px 40px;
box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
height: 30px;width: 125px;
top:31px;left:141px;
position: relative;
}.doraemon .foot .foot_rewrite{
position:relative;top:-11px;left:130px;_left:127px;
width: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);
background: -ms-linear-gradient(right top, #666, #fff 83%, #fff);
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-keyframes eyemove{
80%{margin: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;}}
@-moz-keyframes eyemove{
80%{margin: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;}}
@-ms-keyframes eyemove{
80%{margin: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;}}
</style>
Atas ialah kandungan terperinci 使用css3实现多啦A梦代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：利用CSS3制作简单的3d半透明立方体图片实例代码Artikel seterusnya：分辨率、像素和PPI详细介绍