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 而呈现千 ...
随机推荐
- 编译一个需要用特定key前面的应用程序
LOCAL_PATH := $(call my-dir) include $(CLEAR_VARS) # Build all java files in the java subdirectory L ...
- jsp里面include的静态导入和动态导入的区别
静态导入就是将被导入页面完全融入到导入的页面中:而动态导入只是在servlet里面插入了include方法,导入的这是被导入页面的body标签里面的内容 1.什么是静态导入? 静态导入指的是,将一个外 ...
- Java多线程核心知识
多线程相对于其他 Java 知识点来讲,有一定的学习门槛,并且了解起来比较费劲.在平时工作中如若使用不当会出现数据错乱.执行效率低(还不如单线程去运行)或者死锁程序挂掉等等问题,所以掌握了解多线程至关 ...
- 5、kubernetes资源清单之Pod应用190709
一.Pod镜像及端口 获取帮助文档 # kubectl explain pod.spec.containers spec.containers <[]object> pod.spec.co ...
- ANR错误分析
链接1:https://www.cnblogs.com/xiyuan2016/p/6740623.html 链接2:https://www.jianshu.com/p/3959a601cea6
- 【Linux】GDB用法详解(5小时快速教程)
GDB是一个强大的命令行调试工具.虽然X Window提供了GDB的图形版DDD,但是我仍然更钟爱在命令行模式下使用GDB.大家知道命令行的强大就是在于,其可以形成执行序列,形成脚本. UNIX下的软 ...
- DeepFaceLab620稳定版使用过程详解！
网站上的小白入门系列教程是基于2019.3.13的版本而编写,有部分内容已经发生了变化.而目前比较稳定的版本为620,这个版本保持了很长一段时间,并没有发现什么大问题,用着挺好.所以我决定针对这个版本 ...
- Orchestrator MySQL主库故障切换的几种类型
Orchestrator 对MySQL主库的故障切换分为自动切换和手动切换. 手动切换又分为recover.force-master-failover.force-master-takeover以及g ...
- aria-hidden读屏
图标的可访问性现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符.为了避免 屏幕识读设备抓取非故意的和可能产生混淆的输出内容(尤其是当图标纯粹作为装饰用途时),我们为这些 ...
- UEditor富文本编辑器时，插入图片没有任何反应
1.信息: Unable to find 'struts.multipart.saveDir' property setting. Defaulting to javax.servlet.contex ...