用html+css做机器猫 源代码
先来看一下做出来的效果图，然后再来看源代码
是不是还是很像的
下面来看源代码
<!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>
其实很简单，都是由一部分一部分拼接起来的，你也来试试吧
用html+css做机器猫 源代码的更多相关文章
- 7件你不知道但可以用CSS做的事
不管你信不信,CSS和JavaScript开始重叠,就像CSS增加了更多功能一新.在我写“你可能不知道的CSS和JavaScript互相影响的5种方式”一文时,人们对于JavaScript和CSS是如 ...
- 【CSS】如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
- 纯css做幻灯片效果
css3里面有一个@keyframes动画功能. w3c上面的例子: 可以使用它来做一个幻灯片效果. <!DOCTYPE html> <html lang="en" ...
- [转载] ul li css 做横向菜单
原文地址: http://www.cnblogs.com/amylis_chen/archive/2011/09/24/2188398.html 第一步:建立一个无序列表 我们先建立一个无序列表,来建 ...
- 如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
- 纯CSS做3D旋转魔方
昨天偶然看见网友(简单说 用CSS做一个魔方旋转的效果)做的一个3D旋转魔方 效果就是本博客右侧公告栏所示 在这里把做法展现出来 感兴趣的可以试试 做成自己特有的魔方 <!DOCTYPE h ...
- css做旋转相册效果
css做旋转相册效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- 用div加css做表格去掉外围边框
通过div做表格时想加上边框,并且想取点外围边框: <div class="cont"> <div class="row"> <a ...
- 利用css做扇形
html和css每一块的边边角角都是直来直去,除了border-raius,要怎么做扇形了?当然,你如果只想要得到直角扇形,和半圆,那就很简单?那么做小于180的直角扇形,如何做了(大于180的直角无 ...
随机推荐
- windows 下安装nodejs 要怎么设置环境变量
windows 下安装nodejs 了,也安装了npm, 但是有时候切不能直接用request(‘ws’)这一类的东西.我觉得是确实环境变量或其他设置有问题,能否给个完整的设置方案: 要设置两个东西, ...
- Python学习---IO的异步[twisted模块]
安装twisted模块 Linux: pip3 install twisted Window: a. http://www.lfd.uci.edu/~gohlke/pythonlibs/#twiste ...
- Linux为grub菜单加密码
为grub菜单加密码 加入密码后,再次进入单用户或者给下次管理grub需要输入密码 加密操作 /sbin/grub-md5-crypt # 之后输入2次密码会生成加密后字符串 编辑grub加载文件 v ...
- Windows下Git使用报错：warning：LF will be replaced by CRLF in ××××.××
Windows下Git使用报错: warning:LF will be replaced by CRLF in ××××.××(文件名) The file will have its original ...
- 《关于oracle数据库的勒索病毒的预警》
近日,接部分机构反馈和安全厂商提醒,针对oracle数据库的勒索病毒攻击数量增加.该病毒存在较长潜伏期,会根据数据库实例创建时间距今是否满足1200天决定是否发起攻击.攻击通过执行恶意SQL脚本,加密 ...
- iOS: 聊聊 Designated Initializer（指定初始化函数）:NS_DESIGNATED_INITIALIZER
总结:指定函数的调用规则: 初始化函数的调用顺序与初始化顺序相反. 上面关于指定初始化的规则讲了那么多,其实可以归纳为两点: 便利初始化函数只能调用自己类中的其他初始化方法 指定初始化函数才有资格调用 ...
- kubenetes master使用curl 操作API
前提条件: 已经使用kubeadm 安装集群 查看 kebelet.conf 配置内容 kubectl --kubeconfig /etc/kubernetes/kubelet.conf config ...
- Linux终端里的记录器
我们在调试程序的时候,免不了要去抓一些 log ,然后进行分析. 如果 log 量不是很大的话,那很简单,只需简单的复制粘贴就好. 但是如果做一些压力测试,产生大量 log ,而且系统内存又比较小(比 ...
- django restframework 快速入门
django restframework 快速入门 基本流程 建立 Models 依靠 Serialiers 将数据库取出的数据 Parse 为 API 的数据(可用于返回给客户端,也可用于浏览器显示 ...
- SceneKit下关于修改SCNNode 的Shader展示自定义图形
由于某些需求,需要在苹果OS x系统下展示一组点云,准备使用苹果官方的三维显示控件来完成这一功能.场景点云作为离散的点, 如果每个点以SCNnode的形式加入场景中,则回造成过大的内存消耗,笔者电脑下 ...