關於HTML5和CSS3實現機器貓的程式碼-H5教程-PHP中文網

首頁

web前端

H5教程

關於HTML5和CSS3實現機器貓的程式碼

不言

Jun 26, 2018 am 11:24 AM

css3html5

本文跟大家分享一段html5和css3實現的機器貓功能，程式碼簡單易懂非常不錯，具有參考借鑒價值，有興趣的朋友一起看看吧

下面一段程式碼是有關html5和css3實作機器貓的程式碼，具體程式碼如下：

<!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>

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

HTML5和jQuery實作彈出創意搜尋框層的方法

html5和css3以及jquery實現音樂播放器

以上是關於HTML5和CSS3實現機器貓的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

H5代碼：Web開發人員的最佳實踐Apr 16, 2025 am 12:14 AM

H5代碼的最佳實踐包括：1.使用正確的DOCTYPE聲明和字符編碼；2.採用語義化標籤；3.減少HTTP請求；4.使用異步加載；5.優化圖像。這些實踐能提升網頁的效率、可維護性和用戶體驗。

H5：網絡標準和技術的發展Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今，经历了显著的发展。1)HTML5引入了Canvas、WebStorage等API，增强了Web应用的复杂性和互动性。2)CSS3增加了动画和过渡功能，使页面效果更加丰富。3)JavaScript通过Node.js和ES6的现代化语法，如箭头函数和类，提升了开发效率和代码可读性，这些变化推动了Web应用的性能优化和最佳实践的发展。

H5是HTML5的速記嗎？探索細節Apr 14, 2025 am 12:05 AM

H5不僅僅是HTML5的簡稱，它代表了一個更廣泛的現代網頁開發技術生態：1.H5包括HTML5、CSS3、JavaScript及相關API和技術；2.它提供更豐富、互動、流暢的用戶體驗，能在多設備上無縫運行；3.使用H5技術棧可以創建響應式網頁和復雜交互功能。

H5和HTML5：網絡開發中常用的術語Apr 13, 2025 am 12:01 AM

H5與HTML5指的是同一個東西，即HTML5。 HTML5是HTML的第五個版本，帶來了語義化標籤、多媒體支持、畫布與圖形、離線存儲與本地存儲等新功能，提升了網頁的表現力和交互性。

H5指的是什麼？探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5：工具，框架和最佳實踐Apr 11, 2025 am 12:11 AM

H5開發需要掌握的工具和框架包括Vue.js、React和Webpack。 1.Vue.js適用於構建用戶界面，支持組件化開發。 2.React通過虛擬DOM優化頁面渲染，適合複雜應用。 3.Webpack用於模塊打包，優化資源加載。

HTML5的遺產：當前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee