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>
<div class="wrap">
<div class="whole">
<!-- 头 -->
<div class="head">
<!-- 眼 -->
<div class="eye">
<!-- 左眼 -->
<div class="left_eye">
<!-- 左眼球 -->
<div class="LeyeBall"></div>
</div>
<!-- 右眼 -->
<div class="right_eye">
<!-- 右眼球 -->
<div class="ReyeBall"></div>
</div>
</div>
<!-- 脸 -->
<div class="face">
<!-- 脸型 -->
<div class="feature"></div>
<!-- 鼻 -->
<div class="nose"></div>
<!-- 鼻子线 -->
<div class="Nline"></div>
<!-- 嘴 -->
<div class="mouth"></div>
<!-- 胡子 -->
<div class="mustache">
<div class="MutL_top"></div>
<div class="MutL_center"></div>
<div class="MutL_bottom"></div>
<div class="MutR_higher"></div>
<div class="MutR_middle"></div>
<div class="MutR_lower"></div>
</div>
</div>
</div>
<!-- 脖子 -->
<div class="neck">
<!-- 铃铛 -->
<div class="bell">
<div class="Bline"></div>
<div class="Bcircle"></div>
<div class="Bunderpart"></div>
</div>
</div>
<!-- 身体 -->
<div class="body">
<!-- 肚子 -->
<div class="tummy"></div>
<!-- 肚兜 -->
<div class="bellyband"></div>
<!-- 口袋 -->
<div class="pocket"></div>
<div class="cover"></div>
</div>
<!-- 左手 -->
<div class="left_hand">
<!-- 手臂 -->
<div class="Larm"></div>
<!-- 手掌 -->
<div class="Lpalm"></div>
</div>
<!-- 右手 -->
<div class="right_hand">
<!-- 手臂 -->
<div class="Rarm"></div>
<!-- 手掌 -->
<div class="Rpalm"></div>
</div>
<!-- 脚 -->
<div class="foot">
<!-- 左脚 -->
<div class="left_foot"></div>
<!-- 右脚 -->
<div class="right_foot"></div>
<div class="crotch"></div>
</div>
</div>
</div>
</body>
</html>
HTML5+CSS3-机器猫的更多相关文章
- Web大前端时代之：HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
- 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
- 01.Web大前端时代之：HTML5+CSS3入门系列~初识HTML5
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 文档申明 <!--文档类型申明,html代表是ht ...
- 02.Web大前端时代之：HTML5+CSS3入门系列~H5结构元素
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写&l ...
- 03.Web大前端时代之：HTML5+CSS3入门系列~H5功能元素
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1.hgroup 对网页或区段(secti ...
- 04. Web大前端时代之：HTML5+CSS3入门系列~HTML5 表单
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 一.input新增类型: 1.tel:输入类型用于应该包 ...
- 05. Web大前端时代之：HTML5+CSS3入门系列~H5 多媒体系
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.引入 概述 音频文件或视频文件都可以看做是一个容器文 ...
- 06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...
- 08. Web大前端时代之：HTML5+CSS3入门系列~H5 Web存储
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html
- 【HTML5&CSS3进阶04】CSS3动画应该如何在webapp中运用
动画在webapp的现状 webapp模式的网站追求的就是一个体验,是HTML5&CSS3浪潮下的产物,抛开体验不说,webapp模式门槛比较高: 而体验优化的一个重点便是动画,可以说动画是w ...
随机推荐
- ECharts地图中tooltip提示框通过formatter分别显示多个数值
我原来的CSDN博客上写过这篇文章:http://blog.csdn.net/giscript/article/details/52162165 但是现在发现了代码中存在一个bug,在此更正. 按照原 ...
- Django官方文档学习2——数据库及模板
网址:https://docs.djangoproject.com/en/1.10/intro/tutorial02/ 1.扫描installed_apps,创建需要的数据库table python ...
- 广州项目实施步骤I_练习安装 CentOS x64 6.4
安装Centos x64 6.4 在家里使用 Vmware10.0.1进行模拟安装. 永久KEY注册密钥:5F29M-48312-8ZDF9-A8A5K-2AM0Z 下载地址:http://pan. ...
- 由“大数据量Excel入库高效方式”瞥见“并联系统”之优势
使用场景: 当你有一个Excel文件,需要把其中的数据高速录入到数据库中,文件中包含10万条以上数据. 设计方案: 我们将整个过程分成三个阶段,A(装载Excel文件). ...
- wp8 在OnBackKeyPress事件中调用MessageBox.Show()崩溃
今天写代码的时候遇到一个问题,在wp8中执行下面的代码后,弹出对话框后,停滞一段时间程序退出. protected override void OnBackKeyPress(CancelEventAr ...
- CSS3+Js制作的一款响应式导航条
今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大 ...
- go exec: "gcc": executable file not found in %PATH%
win下使用go,在进行go run build.go时,提示 exec: "gcc": executable file not found in %PATH% 原因是sqlitl ...
- Java并发学习之十九——线程同步工具之Phaser
本文是学习网络上的文章时的总结.感谢大家无私的分享. JDK 1.7 加入了一个新的工具Phaser.Phaser的在功能上与CountDownLatch有部分重合. 以下使用Phaser类来同步3个 ...
- 微信公共服务平台开发（.Net 的实现）10-------地理位置
微信公共平台中涉及到地理位置的有两种情况: 第一.我发送一个自选的地理位置给微信,然后微信可以自动反馈响应的信息. 第二.让微信获取我们GPS定位地址位置,反馈响应的信息. 首 ...
- Android——ViewGroup的一个用法实例(转载)
找了很久,终于找到了. <?xml version="1.0" encoding="UTF-8" ?> <merge xmlns:androi ...