Home > Article > Web Front-end > Use css3 to implement Doraemon code
Use css3 to implement Doraemon code
- 高洛峰Original
- 2017-03-28 10:15:111644browse
This article mainly introduces the use of css3 to implement Doraemon code, which has certain reference value. Interested friends can refer to it
<!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>
The above is the detailed content of Use css3 to implement Doraemon code. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn