6.纯css绘制叮当猫
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>叮当猫</title>
<link rel="stylesheet" type="text/css" href="../css/ddm.css">
</head>
<body>
<div class="ddm">
<!-- 蓝色的头 -->
<div class="head"></div>
<!-- 白色的脸 -->
<div class="line face"></div>
<!-- 左眼 -->
<div class="line eye-left">
<div class="eyeball-left"></div>
</div>
<!-- 右眼 -->
<div class="line eye-right">
<div class="eyeball-right"></div>
</div>
<!-- 鼻子 -->
<div class="line nose">
<div class="nose-white"></div>
</div>
<!-- 左胳膊 -->
<div class="line arm-left"></div>
<!-- 右胳膊 -->
<div class="line arm-right"></div>
<!-- 左手 -->
<div class="line hand-left"></div>
<!-- 右手 -->
<div class="line hand-right"></div>
<!-- 身体主体部分 -->
<div class="body">
<div class="body-top"></div>
</div>
<!-- 左脚 -->
<div class="foot-left"></div>
<!-- 右脚 -->
<div class="foot-right"></div>
<!-- 左腿 -->
<div class="leg-left1"></div>
<!-- 右腿 -->
<div class="leg-left2"></div>
<!-- 裆部 -->
<div class="leg-quyu">
<div class="line pig"></div>
</div>
<!-- 衣服上的图案 -->
<div class="line cloth1">
<div class="line cloth2"></div>
<div class="cloth3"></div>
</div>
<!-- 红色围巾下部分 -->
<div class="nick2"></div>
<!-- 红色围巾上部分 -->
<div class="nick3"></div>
<!-- 红色的大嘴 -->
<div class="mouse-size">
<div class="line mouse1"></div>
</div>
<!-- 左舌头 -->
<div class="line toe1"></div>
<!-- 右舌头 -->
<div class="line toe2"></div>
<!-- 舌头超出嘴的部分隐藏 -->
<div class="toe-quyu">
<div class="line mouse2"></div>
</div>
<!-- 左脸泡 -->
<div class="line huxu1"></div>
<!-- 右脸泡 -->
<div class="line huxu5"></div>
<!-- 嘴巴上部区域设置成白色-->
<div class="mouse-quxian"></div>
<!-- 嘴上的黑色圆弧 -->
<div class="huxu"></div>
<!-- 左第一根胡须 -->
<div class="huxu2"></div>
<!-- 左第二根胡须 -->
<div class="huxu3"></div>
<!-- 左第三根胡须 -->
<div class="huxu4"></div>
<!-- 右第一根胡须 -->
<div class="huxu6"></div>
<!-- 右第二根胡须 -->
<div class="huxu7"></div>
<!-- 右第三根胡须 -->
<div class="huxu8"></div>
<!-- 鼻子下面的竖线 -->
<div class="nose-line"></div>
<!-- 铃铛 -->
<div class="line ring">
<div class="ring1"></div>
<div class="ring2"></div>
<div class="ring3"></div>
<div class="ring4"></div>
</div>
</div>
</body>
</html>
*{
margin:;
padding:;
}
.ddm{
position: relative;
width: 300px;
height: 300px;
margin: 20px auto;
}
.ddm *{
position: absolute;
}
.line{/*通用属性：线框是1.5px的*/
border-style: solid;
border-color: rgba(7,19,31,1);
border-width: 1.5px;
}
.head{/*蓝色的头*/
width: 300px;
height: 300px;
background-color: rgba(6,157,228,1);
border-radius: 50%;
border-style: solid;
border-color: rgba(7,19,31,1);
border-width: 0.58px;
}
.face{/*白色的脸*/
width: 250px;
height: 230px;
background-color: rgba(255,255,255,1);
border-radius: 40% 40% 60% 60%;
top: 65px;
left: 26px;
}
.eye-left{/*左眼*/
width: 70px;
height: 80px;
background-color: rgba(255,255,255,1);
border-radius: 50%;
left: 80px;
top: 15px;
}
.eyeball-left{/*左眼球*/
width: 25px;
height: 25px;
background-color: rgba(2,2,2,1);
border-radius: 50%;
left: 43px;
top: 30px;
}
.eye-right{/*右眼*/
width: 70px;
height: 80px;
background-color: rgba(255,255,255,1);
border-radius: 50%;
left: 148px;
top: 15px;
}
.eyeball-right{/*右眼球*/
width: 25px;
height: 25px;
background-color: black;
border-radius: 50%;
left: 2px;
top: 30px;
}
.nose{/*鼻子*/
width: 50px;
height: 50px;
background-color: rgba(220,6,18,1);
border-radius: 50%;
top: 86px;
left: 123px;
}
.nose-white{/*鼻子上的白点*/
width: 13px;
height: 13px;
background-color: rgba(255,255,255,1);
border-radius: 50%;
top: 9px;
left: 23px;
}
.arm-left{/*左胳膊*/
width: 50px;
height: 120px;
background-color: rgba(6,157,228,1);
border-radius: 50%;
transform: rotate(45deg);
top: 260px;
left: 0px;
}
.arm-right{/*右胳膊*/
width: 50px;
height: 120px;
background-color: rgba(6,157,228,1);
border-radius: 50%;
transform: rotate(-45deg);
top: 260px;
left: 250px;
}
/*左手*/
.hand-left{
width: 50px;
height: 50px;
background-color: rgb(255,255,255,1);
top: 331px;
left: -40px;
border-radius: 50%;
}
/*右手*/
.hand-right{
width: 50px;
height: 50px;
background-color: rgb(255,255,255,1);
top: 331px;
left: 290px;
border-radius: 50%;
}
/*身体主体部分*/
.body{
width: 260px;
height: 160px;
top: 280px;
left: 22px;
overflow: hidden;
}
.body-top{
width: 255px;
height: 460px;
border-width: 0 1.5px;
border-style: none solid;
border-color: none rgba(7,19,31,1);
border-radius: 50%;
top: -100px;
background-color: rgba(6,157,228,1);
}
/*左脚*/
.foot-left{
width: 120px;
height: 70px;
border-radius: 60% 80% 40% 80%;
border-width: 0 1.5px 1.5px 1.5px;
border-style: none solid solid solid;
border-color: none rgba(7,19,31,1) rgba(7,19,31,1) rgba(7,19,31,1);
top: 440px;
left: -10px;
transform: rotate(-15deg);
}
/*右脚*/
.foot-right{
width: 120px;
height: 70px;
border-radius: 80% 60% 80% 40%;
border-width: 0 1.5px 1.5px 1.5px;
border-style: none solid solid solid;
border-color: none rgba(7,19,31,1) rgba(7,19,31,1) rgba(7,19,31,1);
top: 436px;
left: 200px;
transform: rotate(15deg);
}
/*左腿*/
.leg-left1{
width: 150px;
height: 70px;
border-radius: 60% 50% 50% 40%;
top: 400px;
left: 10px;
background-color: rgba(6,157,228,1);
border-bottom: 1.5px solid rgba(7,19,31,1);
border-left: 1.5px solid rgba(7,19,31,1);
}
/*右腿*/
.leg-left2{
width: 150px;
height: 70px;
border-radius: 60% 50% 50% 40%;
top: 398px;
left: 150px;
background-color: rgba(6,157,228,1);
border-bottom: 1.5px solid rgba(7,19,31,1);
border-right: 1.5px solid rgba(7,19,31,1);
}
/*裆部*/
.leg-quyu{
width: 100px;
height: 40px;
top: 430px;
left: 105px;
overflow: hidden;
/*background-color: yellow;*/
}
.pig{
width: 120px;
height: 120px;
background-color: rgba(255,255,255,1);
border-radius: 120% 50%;
transform: rotate(-45deg);
top: 12px;
left: -10px;
}
/*衣服上的图案*/
.cloth1{
width: 130px;
height: 130px;
background-color: rgb(255,255,255,1);
top: 290px;
left: 88px;
border-radius: 50%;
}
.cloth2{
width: 110px;
height: 110px;
background-color: rgb(255,255,255,1);
top: 10px;
left: 8px;
border-radius: 50%;
}
.cloth3{
width: 109px;
height: 70px;
background-color: rgb(255,255,255,1);
top: 10px;
left: 10px;
border-bottom: 2.5px solid rgba(7,19,31,1);
border-radius: 40%;
}
.nick2{/*红色围巾下部分*/
width: 230px;
height: 50px;
background-color: rgba(241,2,23,1);
top: 250px;
left: 35px;
border-radius: 30% 35% 60% 60%;
border-color:none rgba(7,19,31,1) rgba(7,19,31,1) rgba(7,19,31,1);
border-style:none solid solid solid;
border-width:0 1.5px 1.5px 1.5px;
}
.nick3{/*红色围巾上部分*/
width: 200px;
height: 80px;
background-color: white;
top: 202px;
left: 52px;
border-radius: 50%;
border-bottom-color:rgba(7,19,31,1);
border-bottom-style:solid;
border-bottom-width:1.5px;
}
/*红色的大嘴*/
.mouse-size{
width: 200px;
height: 120px;
overflow: hidden;
top: 160px;
left: 55px;
}
.mouse1{
width: 400px;
height: 200px;
background-color: rgba(232,1,21,1);
border-radius: 50%;
transform: rotate(90deg);
top: -185px;
left: -100px;
}
.toe1{/*左边的舌头*/
width: 50px;
height: 60px;
background-color: rgba(236,109,30,1);
border-radius: 50%;
transform: rotate(-80deg);
top: 218px;
left: 105px;
}
.toe2{/*右边的舌头*/
width: 50px;
height: 60px;
background-color: rgba(236,109,30,1);
border-radius: 40%;
transform: rotate(80deg);
top: 218px;
left: 155px;
}
/*舌头超出嘴的部分隐藏*/
.toe-quyu{
width: 114px;
height: 35px;
border-radius:0 0 40% 40%;
background-color: rgba(255,255,255,1);
top: 244px;
left: 100px;
overflow: hidden;
}
.mouse2{
width: 400px;
height: 200px;
background-color: rgba(236,109,30,1);
border-radius: 50%;
transform: rotate(90deg);
top: -269px;
left: -145px;
}
.huxu1{/*左脸泡*/
width: 85px;
height: 60px;
border-radius: 50% 40%;
background-color: rgba(255,255,255,1);
transform: rotate(15deg);
top: 136px;
left: 10px;
}
.huxu5{/*右脸泡*/
width: 85px;
height: 60px;
border-radius: 50% 40%;
background-color: rgba(255,255,255,1);
transform: rotate(-15deg);
top: 130px;
left: 205px;
}
.mouse-quxian{/*嘴巴上部区域设置成白色*/
width: 140px;
height: 40px;
background-color: rgba(255,255,255,1);
top: 150px;
left: 88px;
}
.huxu{/*嘴上的黑色圆弧*/
width: 150px;
height: 50px;
border-radius: 50%;
background-color:rgba(232,1,21,1);
top: 174px;
left: 81px;
border-top-style: solid;
border-top-color: rgba(7,19,31,1);
border-top-width: 1.5px;
}
.huxu2{/*左第一根胡须*/
width: 70px;
height: 10px;
border-top-width: 1.5px;
border-top-style: solid;
border-top-color: rgba(7,19,31,1);
top: 120px;
left: 45px;
transform: rotate(15deg);
}
.huxu3{/*左第二根胡须*/
width: 70px;
height: 20px;
background-color: rgba(255,255,255,1);
border-bottom-width: 1.5px;
border-bottom-style: solid;
border-bottom-color: rgba(7,19,31,1);
top: 128px;
left: 45px;
transform: rotate(5deg);
}
.huxu4{/*左第三根胡须*/
width: 70px;
height: 5px;
border-bottom-width: 1.5px;
border-bottom-style: solid;
border-bottom-color: rgba(7,19,31,1);
top: 160px;
left: 45px;
transform: rotate(-5deg);
}
.huxu6{/*右第一根胡须*/
width: 70px;
height: 10px;
border-top-width: 1.5px;
border-top-style: solid;
border-top-color: rgba(7,19,31,1);
top: 120px;
left: 180px;
transform: rotate(-15deg);
}
.huxu7{/*右第二根胡须*/
width: 70px;
height: 20px;
background-color: rgba(255,255,255,1);
border-bottom-width: 1.5px;
border-bottom-style: solid;
border-bottom-color: rgba(7,19,31,1);
top: 128px;
left: 180px;
transform: rotate(-5deg);
}
.huxu8{/*右第三根胡须*/
width: 70px;
height: 5px;
border-bottom-width: 1.5px;
border-bottom-style: solid;
border-bottom-color: rgba(7,19,31,1);
top: 160px;
left: 180px;
transform: rotate(5deg);
}
.nose-line{/*鼻子下面的竖线*/
width: 5px;
height: 38px;
border-left-width: 3px;
border-left-color: rgba(7,19,31,1);
border-left-style: solid;
top: 138px;
left: 150px;
}
/*铃铛*/
.ring{
width: 65px;
height: 65px;
background-color: yellow;
border-radius: 50%;
top: 290px;
left: 120px;
}
.ring1{
width: 60px;
height: 10px;
border-top: 2px solid rgba(7,19,31,1);
border-radius: 40%;
top: 13px;
left: 2px;
}
.ring2{
width: 66px;
height: 10px;
border-top: 2px solid rgba(7,19,31,1);
border-radius: 40%;
top: 23px;
left: 0px;
}
.ring3{
width: 10px;
height: 20px;
border-left: 2px solid rgba(7,19,31,1);
top: 44px;
left: 30px;
}
.ring4{
width: 10px;
height: 10px;
border: 1px solid rgba(7,19,31,1);
background-color: rgba(255,255,255,1);
border-radius: 50%;
top: 33px;
left: 25px;
}
6.纯css绘制叮当猫的更多相关文章
- CSS 魔法系列：纯 CSS 绘制三角形（各种角度）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- 摘记 史上最强大的40多个纯CSS绘制的图形（一）
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...
- 史上最强大的40多个纯CSS绘制的图形
Square(正方形) #square { width: 100px; height: 100px; background: red; } Rectangle(矩形) #rectangle { wid ...
- 40多个纯CSS绘制的图形
本文由码农网 – 陈少华原创,转载请看清文末的转载要求. 今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和 ...
- 碉堡了！ 纯 CSS 绘制《辛普森一家》人物头像
这篇文章给大家分享一组纯 CSS 绘制的<辛普森一家>人物头像.<辛普森一家>(The Simpsons)是马特·格勒宁为美国福克斯广播公司创作的一部动画情景喜剧.该剧通过对霍 ...
- CSS 魔法系列：纯 CSS 绘制各种图形《系列六》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS 魔法系列：纯 CSS 绘制各种图形《系列五》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS 魔法系列：纯 CSS 绘制图形（各种形状的钻石）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS 魔法系列：纯 CSS 绘制图形（心形、六边形等）
<CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...
随机推荐
- crm 项目的部署
发布CRM你将使用以下软件 nginx uWSGI CentOS7 CRM项目文件 virtualenv supervisor WSGI.uWSGI python web服务器开发使用WSGI协议(W ...
- C++入门经典-例5.18-通过引用交换数值
1:在C++中,函数参数的传递方式主要有两种,即值传递和引用传递.值传递是指在函数调用时,将实际参数的值赋值一份传递到调用函数中,这样如果在调用函数中修改了参数的值,其改变将不会影响到实际参数的值.而 ...
- 第七周学习总结&JAVA实验五报告。
JAVA实验报告五: 实验四 类的继承 实验目的 理解抽象类与接口的使用: 了解包的作用,掌握包的设计方法. 实验要求 掌握使用抽象类的方法. 掌握使用系统接口的技术和创建自定义接口的方法. 了解 J ...
- Mysql 中需不需要commit
摘自:https://blog.csdn.net/zzyly1/article/details/81003122 mysql在进行增删改操作的时候需不需要commit,这得看你的存储引擎, 如果是不支 ...
- SAP MaxDB Backup and Restore
Back up the data and redo log entries from the data and log areas of your database to data carriers ...
- ListView 中图片错位的问题是如何产生的?
图片错位问题的本质源于我们的 listview 使用了缓存 convertView,假设一种场景,一个 listview 一屏显示九个item,那么在拉出第十个 item 的时候,事实上该 item ...
- 工具栏对象GUI Status 与GUI Title
GUI Status 与GUI Title用于自定义工具栏按钮及Report程序标题栏显示内容, 可以通过se41\SE80或直接SE38中展开对象列表进行相关操作. 如下是在SE38里,点击[显示物 ...
- 1 Configuring SAP ERP Sales and Distribution -introduction to SAP
SAP is one of the most popular enterprise resource planning (ERP) solutions inthe world. It offers a ...
- CMake下，某些选项的后调整
编译安卓NDK库时,发现在R15的NDK编译出来的库,总是带了-g选项,导致附带调试,文件过大. 搜索一番后,结论是NDK的文件中有问题: https://github.com/android/ndk ...
- Linux系统基本操作
学习目标: 通过本实验掌握Linux的系统安装.磁盘分区.文件管理.IP地址配置.SSH远程管理.WinSCP文件传输.chmod文件权限管理.tar及gzip/bzip2压缩工具的使用,以及关机 ...