À propos du code HTML5 et CSS3 pour implémenter Doraemon-Tutoriel H5-php.cn

À propos du code HTML5 et CSS3 pour implémenter Doraemon

不言

Libérer： 2018-06-26 11:24:08

original

2737 Les gens l'ont consulté

Cet article partagera avec vous un élément de la fonction Doraemon implémentée par html5 et css3. Le code est simple et facile à comprendre, ce qui est très bon et a une valeur de référence. Les amis intéressés devraient y jeter un œil ensemble

Le morceau de code suivant concerne le HTML5 et le CSS3. CSS3 implémente le code de Doraemon. Le code spécifique est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>机器猫</title>
<style type="text/css">
* {   
margin: 0;   
padding: 0;   
}   
.whole {   
width: 800px;   
margin: 20px auto;   
/*border: 2px solid yellow;*/   
background-color: white;   
position: relative;   
}   
.head {   
margin: 0 auto;   
position: relative;   
width: 500px;   
height: 440px;   
background-color: #00b7e7;   
border-radius: 220px;   
border: 1px solid red;   
}   
.eye .left_eye,   
.eye .right_eye {   
width: 100px;   
height: 130px;   
background-color: white;   
border: 2px solid black;   
border-radius: 50px;   
position: absolute;   
top: 50px;   
z-index: 3;   
}   
.eye .LeyeBall,   
.eye .ReyeBall {   
width: 20px;   
height: 20px;   
background: black;   
border-radius: 10px;   
position: absolute;   
top: 65px;   
}   
.eye .left_eye {   
left: 146px;   
}   
.eye .right_eye {   
left: 250px;   
}   
.eye .LeyeBall {   
right: 10px;   
}   
.eye .ReyeBall {   
left: 10px;   
}   
.face {   
position: relative;   
z-index: 2;   
}   
.face .feature {   
width: 400px;   
height: 320px;   
border-radius: 160px;   
position: absolute;   
top: 100px;   
left: 50px;   
background: white;   
}   
.face .nose {   
width: 45px;   
height: 50px;   
border-radius: 23px;   
background-color: #cf3318;   
border: 2px solid black;   
position: absolute;   
top: 165px;   
left: 225px;   
z-index: 3;   
}   
.face .Nline {   
width: 3px;   
height: 160px;   
background: black;   
position: absolute;   
top: 218px;   
left: 248px;   
z-index: 3;   
}   
.face .mouth {   
width: 280px;   
height: 280px;   
border-bottom: 5px solid black;   
border-radius: 140px;   
position: absolute;   
top: 98px;   
left: 105px;   
}   
.face .mustache .MutR_higher {   
width: 80px;   
height: 2px;   
background: black;   
position: absolute;   
top: 220px;   
left: 295px;   
z-index: 2;   
}   
.face .mustache .MutR_middle {   
width: 80px;   
height: 2px;   
background: black;   
position: absolute;   
top: 240px;   
left: 295px;   
z-index: 2;   
}   
.face .mustache .MutR_lower {   
width: 80px;   
height: 2px;   
background: black;   
position: absolute;   
top: 260px;   
left: 295px;   
z-index: 2;   
}   
.face .mustache .MutL_top {   
width: 80px;   
height: 2px;   
background: black;   
position: absolute;   
top: 220px;   
left: 115px;   
z-index: 2;   
}   
.face .mustache .MutL_center {   
width: 80px;   
height: 2px;   
background: black;   
position: absolute;   
top: 240px;   
left: 115px;   
z-index: 2;   
}   
.face .mustache .MutL_bottom {   
width: 80px;   
height: 2px;   
background: black;   
position: absolute;   
top: 260px;   
left: 115px;   
z-index: 2;   
}   
.face .mustache .MutL_bottom,   
.face .mustache .MutR_higher {   
transform: rotate(160deg);   
}   
.face .mustache .MutL_top,   
.face .mustache .MutR_lower {   
transform: rotate(200deg);   
}   
.neck {   
width: 300px;   
height: 30px;   
background-color: #a31f12;   
border: 2px solid black;   
border-radius: 15px;   
position: relative;   
top: 0px;   
left: 250px;   
z-index: 4;   
}   
.neck .bell {   
width: 60px;   
height: 60px;   
overflow: hidden;   
border: 2px solid black;   
border-radius: 60px;   
background-color: #cfcb3c;   
position: absolute;   
top: 5px;   
left: 120px;   
}   
.bell .Bline {   
width: 60px;   
height: 2px;   
background-color: #cfcb3c;   
border: 2px solid black;   
border-radius: 3px 3px 0 0;   
position: absolute;   
top: 15px;   
}   
.bell .Bcircle {   
width: 20px;   
height: 16px;   
background: black;   
border-radius: 8px;   
position: absolute;   
top: 25px;   
left: 20px;   
}   
.bell .Bunderpart {   
width: 3px;   
height: 20px;   
background-color: black;   
position: absolute;   
left: 28px;   
top: 40px;   
}   
.body {   
position: relative;   
top: -300px;   
z-index: 1;   
}   
.body .tummy {   
width: 280px;   
height: 240px;   
background-color: #00b1e1;   
border: 2px solid black;   
position: absolute;   
top: 267px;   
left: 260px;   
}   
.body .bellyband {   
width: 220px;   
height: 220px;   
background-color: white;   
border: 2px solid black;   
border-radius: 110px;   
position: absolute;   
left: 290px;   
top: 267px;   
}   
.body .pocket {   
width: 160px;   
height: 160px;   
border-radius: 80px;   
background-color: white;   
border: 2px solid black;   
position: absolute;   
top: 305px;   
left: 320px;   
}   
.cover {   
width: 164px;   
height: 80px;   
background-color: white;   
border-bottom: 2px solid black;   
/*border: 5px solid orange;*/   
position: absolute;   
top: 300px;   
left: 320px;   
}   
.left_hand,   
.right_hand {   
height: 100px;   
width: 100px;   
position: absolute;   
top: 272px;   
left: 248px;   
}   
.left_hand {   
left: -10px;   
}   
.left_hand .Larm {   
width: 70px;   
height: 100px;   
background-color: #00bee8;   
border: 1px solid black;   
position: relative;   
top: 200px;   
left: 535px;   
transform: rotateZ(135deg);   
/*z-index: -1;*/   
}   
.right_hand {   
left: -10px;   
}   
.right_hand .Rarm {   
width: 70px;   
height: 100px;   
background-color: #00bee8;   
border: 1px solid black;   
/*z-index: -1;*/   
position: relative;   
top: 200px;   
left: 215px;   
transform: rotateZ(45deg);   
}   
.left_hand .Lpalm,   
.right_hand .Rpalm {   
width: 80px;   
height: 80px;   
border-radius: 40px;   
border: 2px solid black;   
background-color: white;   
position: absolute;   
}   
.right_hand .Rpalm {   
left: 580px;   
top: 260px;   
z-index: 1;   
}   
.left_hand .Lpalm {   
left: 160px;   
top: 260px;   
z-index: 1;   
}   
.foot .left_foot,   
.foot .right_foot {   
width: 150px;   
height: 40px;   
background-color: white;   
border: 2px solid black;   
border-radius: 80px 60px 60px 40px;   
position: relative;   
}   
.foot .left_foot {   
left: 240px;   
top: 210px;   
}   
.foot .right_foot {   
top: 165px;   
left: 410px;   
}   
.foot .crotch {   
width: 40px;   
height: 20px;   
background-color: white;   
border: 2px solid black;   
border-bottom: none;   
border-radius: 40px 40px 0 0;   
position: relative;   
top: 103px;   
left: 382px;   
z-index: 2   
}   
</style>
</head>
<body>
<p class="wrap">
<p class="whole">
<!-- 头 -->
<p class="head">
<!-- 眼 -->
<p class="eye">
<!-- 左眼 -->
<p class="left_eye">
<!-- 左眼球 -->
<p class="LeyeBall"></p>
</p>
<!-- 右眼 -->
<p class="right_eye">
<!-- 右眼球 -->
<p class="ReyeBall"></p>
</p>
</p>
<!-- 脸 -->
<p class="face">
<!-- 脸型 -->
<p class="feature"></p>
<!-- 鼻 -->
<p class="nose"></p>
<!-- 鼻子线 -->
<p class="Nline"></p>
<!-- 嘴 -->
<p class="mouth"></p>
<!-- 胡子 -->
<p class="mustache">
<p class="MutL_top"></p>
<p class="MutL_center"></p>
<p class="MutL_bottom"></p>
<p class="MutR_higher"></p>
<p class="MutR_middle"></p>
<p class="MutR_lower"></p>
</p>
</p>
</p>
<!-- 脖子 -->
<p class="neck">
<!-- 铃铛 -->
<p class="bell">
<p class="Bline"></p>
<p class="Bcircle"></p>
<p class="Bunderpart"></p>
</p>
</p>
<!-- 身体 -->
<p class="body">
<!-- 肚子 -->
<p class="tummy"></p>
<!-- 肚兜 -->
<p class="bellyband"></p>
<!-- 口袋 -->
<p class="pocket"></p>
<p class="cover"></p>
</p>
<!-- 左手 -->
<p class="left_hand">
<!-- 手臂 -->
<p class="Larm"></p>
<!-- 手掌 -->
<p class="Lpalm"></p>
</p>
<!-- 右手 -->
<p class="right_hand">
<!-- 手臂 -->
<p class="Rarm"></p>
<!-- 手掌 -->
<p class="Rpalm"></p>
</p>
<!-- 脚 -->
<p class="foot">
<!-- 左脚 -->
<p class="left_foot"></p>
<!-- 右脚 -->
<p class="right_foot"></p>
<p class="crotch"></p>
</p>
</p>
</p>
</body>
</html>

Copier après la connexion

Ce qui précède est l'intégralité du contenu de. cet article. J'espère qu'il sera utile à l'apprentissage de tout le monde. Veuillez prêter attention au contenu plus pertinent du site Web PHP chinois !

Recommandations associées :

HTML5 et jQuery pour implémenter la couche de zone de recherche de créations pop-up

html5, css3 et jquery implémentation du lecteur de musique

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!