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 而呈现千 ...
随机推荐
- maven jdbc 驱动安装
https://mvnrepository.com/ 搜索 : com.microsoft.sqlserver 点击进入: https://mvnrepository.com/artifact/co ...
- windows管理员权限激活
第一步:计算机-右键--管理--选择用户,选择administrator用户--取消勾选:账户禁用 第二步:alt+ctrl+delete,快捷键调出资源管理器--点击切换用户 第三步:显示出现adm ...
- WIN10下命令行禁用编辑模式
在开发的时候 控制台输出信息 点一下右键就进入编辑模式了,WIN7没有这个问题.网上搜了一下 说是要 禁用编辑模式,下面是代码VS2005可用 { #ifndef ENABLE_EXTENDED_FL ...
- vs2015使用低版本编译的openssl问题
用Vs2005编译的openssl,在vs2015中使用就悲剧了,报如下错误 >libeay32.lib(cryptlib.obj) : error LNK2019: 无法解析的外部符号 __v ...
- leetcode 102二叉树的层序遍历
5月20更新: 使用借助队列实现bfs,定义len记录队列的尺寸直接进行遍历层序 /** * Definition for a binary tree node. * struct TreeNode ...
- java远程调用中出现的问题（主要是在不同电脑之间出现的问题）
1.在运行远程服务端之前,使用rmic命令操作impl 2.运行客户端出现time out,尝试ping服务器电脑不能成功.关闭服务器端防火墙,可ping成功. 3.显示连接失败,错误显示的ip不是自 ...
- IFB上挂载NETEM
转发虚拟网卡的ingress 建立虚拟网卡的ingress转发到ifb0(每一个Pod): tc qdisc add dev calixxxxxxxxxxx ingress tc filter add ...
- 比较&关系运算符
<1> 比较(即关系)运算符 python中的比较运算符如下表 运算符 描述 示例 == 检查两个操作数的值是否相等,如果是则条件变为真. 如a=3,b=3则(a == b) 为 true ...
- Ubuntu：Unable to locate package ***
在Ubuntu 上使用apt-get 安装包时遇到 Unable to locate package 的信息 解决方案: 更细apt-get然后重新安装 #sudo apt-get update ...
- 前端UI框架搜集
网址:https://blog.csdn.net/will5451/article/details/80652429?utm_source=blogxgwz6 网址:https://www.cnblo ...