首頁 > web前端 > html教學 > HTML5+CSS3-機器貓

HTML5+CSS3-機器貓

WBOY
發布: 2016-10-18 08:42:05
原創
916 人瀏覽過


機器 style type="text/css"> <p> * {</p> <p> margin: 0;</p> <p> padding: 0;</p> <p> }</p> <p> </p> 邊寬邊 . px auto;<p> </p> /*邊框: 2px 純黃;*/<p> </p> 背景顏色: 白色;<p> </p> 位置: 相對;<p> </p> }<p> </p> <p> 邊距 . .</p> }<p> </p> <p> 面</p>寬度:500px;<p> </p> 高度:440px;<p> </p> 背景顏色:#00b7e7;<p> </p> 邊框半徑:220px;<p> </p> 邊框:1px 純紅色; ft_eye,<p> </p> .eye . right_eye {<p> </p> 寬度:100px;<p> </p> 高度:130px;<p> </p> 背景顏色:白色;<p> </p> 邊框:2px 純黑;上 5 <p> </p> 邊框:2px 純黑;頂部<p> </p> 半徑:5 0px;<p> </p> z 索引:3;<p> </p> }<p> </p> <p> </p> .eye .LeyeBall,<p> </p> .eye .ReyeBall {<p> </p> 寬度:20px;eye .ReyeBall {<p> </p> 寬度:20px; <p> 邊框半徑:10px;</p> <p> 位置:絕對;</p> <p> 上:65px;</p> <p> }</p> <p> </p> <p> .eye .left_eye {</p> <p> 左:146px; {</p> <p> 左:250px;</p> <p> } </p> <p> </p> <p> .eye .LeyeBall {</p> <p> 右:10px;</p> <p> }</p> <p> </p> <p> .R{🜎 </p> .face {<p> </p> 位置:相對;<p> </p> z 索引:2;<p> </p> }<p> </p> <p> </p> .face .feature {<p> </p> 寬度:400px;<p> </p> 高度:3200px; px; <p></p>左:50px;<p></p>背景:白色;<p></p>}<p></p> <p></p>.face.nose{<p></p>寬度:45px; <p></p>.S. 18 ;<p></p>邊框:2px純黑色;<p></p>位置:絕對;<p></p>頂部:165px;<p></p>左:225px;<p></p>z索引: 3;<p> </p> }<p></p>z索引: 3; 寬度x ;<p> </p> 高度: 160px;<p> </p> 背景: 黑色;<p> </p> 位置: 絕對;<p> </p> 頂: 218px;<p> </p> 左:248px ; <p> </p> .face .mouth {<p> </p> 寬度: 280px;<p> </p> 高度: 280px;<p> </p> 邊框底部: 5px 純黑;<p> </p> 邊框半徑: 140 像素:105px;<p> </p> }<p> </p> <p> </p> .face .mustache .MutR_higher {<p> </p> 寬度:80px;<p> </p> 高度:2px; <p> 左:295px;</p> <p> z 索引:2;</p> <p> }</p> <p> </p> <p> .face .mustache .MutR_middle {</p> <p> 寬度: 80px;</p> <p> 2px </p> 寬度:80px; :240px;<p> </p> 左:295px;<p> </p> z 索引:2;<p> </p> }<p> </p> <p> .face .mustache .M utR_lower { </p> 位置:絕對;<p> </p> 上:260 像素;<p> </p> 左:295 像素;<p> </p> z 索引:2;<p> </p> }<p> </p> <p> p </p> 高度:2px;<p> </p> 背景:黑色;<p> </p> 位置:絕對;<p> </p> 上:220px;<p> </p> 左:115px;<p> </p> z 索引:2 ;<p> 🜎 </p> <p> 寬度:80px; </p> <p> 高度:2px;</p> <p> 背景:黑色;</p> <p> 位置:絕對;</p> <p> 上:240px; </p> <p> 左:115px ;</p> <p> </p> .face .mustache .MutL_bottom {<p> </p> 寬度:80px;<p> </p> 高度:2px;<p> </p> 背景:黑色;<p> </p> 位置:絕對; <p> </p> - 上:260px; <p></p> <p>.face.mustache.MutL_bottom,</p> <p>.face.mustache.MutR_higher{</p> <p>轉換:旋轉(160deg);</p> <p> }</p> <p> face .MutR_lower {</p> <p> 變換:旋轉(200deg);</p> <p> }</p> <p> </p> <p> .neck { </p> <p> 寬度:300px;</p> <p> 高度:30px; ;</p> <p>邊框半徑:15px;</p> <p>位置:相對;</p> <p>頂:0px;</p> <p>左:250px;</p> <p>z-索引: 4;</p> <p> }</p> 寬度<p>z-索引: 4;</p> <p> }</p> 寬度<p>高度: 60px;</p> <p> 溢位: 隱藏;</p> <p> 邊框: 2px 純黑;</p> <p> 邊框半徑: 60px ; </p> <p> background-color: #cfcb3c;</p> <p> position: absolute;</p> <p> top: 5px;</p> <p> left: 120px;</p> <p> }</p> <p> </p> <p> .bell .Bline {</p> <p> width: 60px;</p> <p> height: 2px;</p> <p> background-color: #cfcb3c;</p> <p> border: 2px solid black;</p> <p> border-radius: 3px 3px 0 0;</p> <p> position: absolute;</p> <p> top: 15px;</p> <p> }</p> <p> </p> <p> .bell .Bcircle {</p> <p> width: 20px;</p> <p> height: 16px;</p> <p> background: black;</p> <p> border-radius: 8px;</p> <p> position: absolute;</p> <p> top: 25px;</p> <p> left: 20px;</p> <p> }</p> <p> </p> <p> .bell .Bunderpart {</p> <p> width: 3px;</p> <p> height: 20px;</p> <p> background-color: black;</p> <p> position: absolute;</p> <p> left: 28px;</p> <p> top: 40px;</p> <p> }</p> <p> </p> <p> .body {</p> <p> position: relative;</p> <p> top: -300px;</p> <p> z-index: 1;</p> <p> }</p> <p> </p> <p> .body .tummy {</p> <p> width: 280px;</p> <p> height: 240px;</p> <p> background-color: #00b1e1;</p> <p> border: 2px solid black;</p> <p> position: absolute;</p> <p> top: 267px;</p> <p> left: 260px;</p> <p> }</p> <p> </p> <p> .body .bellyband {</p> <p> width: 220px;</p> <p> height: 220px;</p> <p> background-color: white;</p> <p> border: 2px solid black;</p> <p> border-radius: 110px;</p> <p> position: absolute;</p> <p> left: 290px;</p> <p> top: 267px;</p> <p> }</p> <p> </p> <p> .body .pocket {</p> <p> width: 160px;</p> <p> height: 160px;</p> <p> border-radius: 80px;</p> <p> background-color: white;</p> <p> border: 2px solid black;</p> <p> position: absolute;</p> <p> top: 305px;</p> <p> left: 320px;</p> <p> }</p> <p> </p> <p> .cover {</p> <p> width: 164px;</p> <p> height: 80px;</p> <p> background-color: white;</p> <p> border-bottom: 2px solid black;</p> <p> /*border: 5px solid orange;*/</p> <p> position: absolute;</p> <p> top: 300px;</p> <p> left: 320px;</p> <p> }</p> <p> </p> <p> .left_hand,</p> <p> .right_hand {</p> <p> height: 100px;</p> <p> width: 100px;</p> <p> position: absolute;</p> <p> top: 272px;</p> <p> left: 248px;</p> <p> }</p> <p> </p> <p> .left_hand {</p> <p> left: -10px;</p> <p> }</p> <p> </p> <p> .left_hand .Larm {</p> <p> width: 70px;</p> <p> height: 100px;</p> <p> background-color: #00bee8;</p> <p> border: 1px solid black;</p> <p> position: relative;</p> <p> top: 200px;</p> <p> left: 535px;</p> <p> transform: rotateZ(135deg);</p> <p> /*z-index: -1;*/</p> <p> }</p> <p> </p> <p> .right_hand {</p> <p> left: -10px;</p> <p> }</p> <p> </p> <p> .right_hand .Rarm {</p> <p> width: 70px;</p> <p> height: 100px;</p> <p> background-color: #00bee8;</p> <p> border: 1px solid black;</p> <p> /*z-index: -1;*/</p> <p> position: relative;</p> <p> top: 200px;</p> <p> left: 215px;</p> <p> transform: rotateZ(45deg);</p> <p> }</p> <p> </p> <p> .left_hand .Lpalm,</p> <p> .right_hand .Rpalm {</p> <p> width: 80px;</p> <p> height: 80px;</p> <p> border-radius: 40px;</p> <p> border: 2px solid black;</p> <p> background-color: white;</p> <p> position: absolute;</p> <p> }</p> <p> </p> <p> .right_hand .Rpalm {</p> <p> left: 580px;</p> <p> top: 260px;</p> <p> z-index: 1;</p> <p> }</p> <p> </p> <p> .left_hand .Lpalm {</p> <p> left: 160px;</p> <p> top: 260px;</p> <p> z-index: 1;</p> <p> }</p> <p> </p> <p> .foot .left_foot,</p> <p> .foot .right_foot {</p> <p> width: 150px;</p> <p> height: 40px;</p> <p> background-color: white;</p> <p> border: 2px solid black;</p> <p> border-radius: 80px 60px 60px 40px;</p> <p> position: relative;</p> <p> }</p> <p> </p> <p> .foot .left_foot {</p> <p> left: 240px;</p> <p> top: 210px;</p> <p> }</p> <p> </p> <p> .foot .right_foot {</p> <p> top: 165px;</p> <p> left: 410px;</p> <p> }</p> <p> </p> <p> .foot .crotch {</p> <p> width: 40px;</p> <p> height: 20px;</p> <p> background-color: white;</p> <p> border: 2px solid black;</p> <p> border-bottom: none;</p> <p> border-radius: 40px 40px 0 0;</p> <p> position: relative;</p> <p> top: 103px;</p> <p> left: 382px;</p> <p> z-index: 2</p> <p> }</p> <p> </style></p> <p> </head></p> <p><br></p> <p> <body></p> <p> <div class="wrap"></p> <p> <div class="whole"></p> <p><br></p> <p> <!-- 头 --></p> <p> <div class="head"></p> <p><br></p> <p> <!-- 眼 --></p> <p> <div class="eye"></p> <p><br></p> <p> <!-- 左眼 --></p> <p> <div class="left_eye"></p> <p> <!-- 左眼球 --></p> <p> <div class="LeyeBall"></div></p> <p> </p> <p><br></p> <p> <!-- 右眼 --></p> <p> </p> <div class="right_eye"> <p> <!-- 右眼 --</p> class="Re "></div><p> </p> </div><p> </p> </div><p> </p><p><br> </p> <!-- 臉--></p> <p> </p> <div class="face"> <p> </p>--臉型--><p> <br> </p> <div class="feature"></div> <p></p> <p> </p> <!-- 鼻--><p> <br> </p> <div class="nose"></div> <p></p> <div class="nose"></div> <p> </p> <p><br></p> <p></p> <p></p> <p><br></p> <!-- 鼻子線--><p> </p> <div class="Nline"></div> <p> </p> <p><br> </p> <!-- 嘴巴--><p> </p> <div class="mouth"></div> <p> </p> <p></p> <p> <!-- 鬍子--> ;</p> <p> </p> <div class="mustache"> <p> </p> <div class="MutL_top"> <p> </p> <div class="ML_divcenter div></p> <p> < ;div class=" mutl_bottom></div> <p> </p> <div class="MutR_higher"></div> <p> </p> <div class="MutR_middle"></div> <p> </p> <div class="MutR_middle"></div> <p> </p> <div class="MutR_lower"></div> <br> </div> <p> </p> </div> <p> </p> </div> <p> </p> <p></p> <p> <!-- 頸部--> ;</p> <p></p> <p> <!-- 頸部--> ;</p> class-- "><p> </p> <!-- 鈴鐺--><p> </p> <div class="bell"> <p> <br> </p> <div class="Bline"></div> <p> </p> <div class="Bcircle"></div> <p> </p> <div class="Bunderpart"></div> <p> </p> </div> <br> div><p> </p> <p></p> <p> <!-- 身體--><br> </p> class=" <p></p> <p> </p> <!-- 腹部--><p> <br> </p> <div class="腹部"></div> <p></p> <p> </p> <!-- 肚兜--><p> <br></p> <p> <!-- 肚兜--></p> <p></p> <p> <!-- 肚兜--><br> </p> <p> </p> <!-- 肚兜--><p> </p> <p> <br> <!-- 肚兜--></p> <p></p> <p> <!-- 肚兜--></p> <p><br> </p> <div>belly -> /div><p> </p> <p></p> <p> <!-- 口袋--></p> <p> </p> <div class="pocket"></div> <br> <p></p> <p> </p> <div class="cover">">" /div><p> <br></p> <p> </p> <!-- 左手--><p> </p> <div class="left_hand"> <p> <br></p> <p> </p> <!-- 手臂--><p> == /div></p> <p></p> <p> <br> <!-- 手法--></p> <p> </p> <div class="Lpalm"></div> <p> </p> </div> <p>-- <br> </p> <p> </p> <div class="right_hand"> <p></p> <p> <br> <!-- 手臂--></p> <p> </p> <div class=" Rarm"></div> <p></p> <p> </p> <p> </p> <div class="Rpalm"></div> <p> </p> </div> <p> </p> <p> <br> <!-- 腳--></p> <p> </p> <div class="foot"> <!-- 腳--><p> </p> <p> </p> <div class="left_foot "></div> <br> <p></p> </div> <!-- 右腳--><div id="MySignature"> </div> <div class="right_foot"></div> <div class="clear"> </div>🎜🎜<div> </div> </div> </div> </div> 🎜
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板