Heim > Artikel > Web-Frontend > Verwenden Sie CSS3, um Doraemon-Code zu implementieren
Verwenden Sie CSS3, um Doraemon-Code zu implementieren
- 高洛峰Original
- 2017-03-28 10:15:111706Durchsuche
In diesem Artikel wird hauptsächlich die Verwendung von CSS3 zur Implementierung von Doraemon-Code vorgestellt, der einen bestimmten Referenzwert hat
<!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>
Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS3, um Doraemon-Code zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Verwenden Sie CSS3, um einen einfachen Beispielcode für ein durchscheinendes 3D-Würfelbild zu erstellenNächster Artikel：Verwenden Sie CSS3, um einen einfachen Beispielcode für ein durchscheinendes 3D-Würfelbild zu erstellen
In Verbindung stehende Artikel
Mehr sehen- Wie füge ich mit Bootstrap Symbole zu Sucheingabefeldern hinzu?
- Warum rendert Flexbox in IE10 mit unvorhersehbaren Breiten?
- Wie kann ich die maximale Breite für Tabellenzellen mithilfe von Prozentsätzen in HTML festlegen?
- Wie kann ich mehrere Schriftstärken mit einer einzigen @font-face-Deklaration importieren?
- Wie erstelle ich feste Tabellenüberschriften mit CSS?