<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 梅花鹿</title>
<style>
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
background: #F0E6DC;
background: radial-gradient(at 76% 28%, #FFE2B2 -37%, rgba(226, 157, 117, 0.77) 101%);
;
height: 100%;
}
/*Colors*/
.floor-grass {
background: #e45b3b;
}
.container {
height: 530px;
position: absolute;
overflow: hidden;
width: 100%;
bottom: 0;
}
.container > .floor-grass {
position: absolute;
bottom: 0;
height: 5px;
display: block;
width: 100%;
border-bottom: 1px solid #e45b3b;
}
#deer-wrapper {
height: 510px;
width: 763px;
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%, 0);
}
#sun {
position: fixed;
right: 20%;
top: 20%;
height: 137px;
width: 137px;
background: #E4593A;
border-radius: 50%;
box-sizing: border-box;
padding: 5px;
border: 10px solid #E89880;
}
#deer .body {
position: absolute;
height: 116px;
width: 289px;
background: #C8906F;
top: 228px;
left: 266px;
border-top-right-radius: 78px;
}
#deer .body:after {
content: "";
height: 61px;
position: absolute;
width: 139px;
background: #E1B49D;
bottom: 0;
left: 59px;
border-radius: 34px 34px 0 0;
}
#deer .body:before {
content: "";
position: absolute;
/* top: 0; */
right: 0;
height: 0;
width: 0;
bottom: 0;
left: 197px;
border: solid;
border-width: 0 3px 13px 1px;
border-color: transparent transparent #E1B49D transparent;
z-index: 99;
}
#deer .body .bottom {
position: absolute;
height: 128px;
width: 160px;
background: #C8906F;
right: -14px;
top: -12px;
border-radius: 50%;
}
#deer .bottom:after {
content: "";
position: absolute;
height: 96px;
width: 108px;
background: #C8906F;
border-radius: 50%;
right: -1px;
top: 39px;
}
#deer .bottom:before {
content: "";
position: absolute;
height: 122px;
width: 93px;
background: #C8906F;
border-radius: 50%;
right: -5px;
top: 20px;
z-index: 99;
transform: rotate(6deg);
}
#deer .loin {
position: absolute;
top: 220px;
height: 8px;
width: 205px;
background: #B67E5D;
left: 266px;
z-index: -1;
border-top: 1px solid #AB7656;
}
#deer .tail {
position: absolute;
top: 279px;
height: 44px;
width: 21px;
right: 180px;
background: #B67E5B;
border-radius: 0 0 0 100%;
transform: rotate(-42deg);
}
#deer .legs .leg {
position: absolute;
}
#deer .legs .leg-1,
#deer .legs .leg-2 {
background: #c8906f;
}
#deer .legs .leg-1 {
top: 335px;
width: 137px;
height: 32px;
left: 188px;
border-radius: 66px 0 69px 0;
}
#deer .legs .leg-2 {
top: 343px;
height: 89px;
width: 21px;
background: #98644C;
left: 291px;
border-bottom-right-radius: 21px;
z-index: -7;
}
#deer .legs .leg-2:after {
content: "";
position: absolute;
height: 84px;
width: 20px;
background: #98644C;
right: -7px;
transform: rotate(10deg);
top: -8px;
border-bottom-right-radius: 6px;
}
#deer .legs .leg-2:before {
content: "";
position: absolute;
height: 19px;
width: 24px;
right: -13px;
background: #98644C;
top: 56px;
border-bottom-right-radius: 100%;
z-index: -2;
}
#deer .legs .leg-3 {
right: 295px;
top: 344px;
height: 72px;
width: 73px;
background: #98644C;
border-bottom-left-radius: 89%;
}
#deer .legs .leg-3:after {
content: "";
position: absolute;
bottom: 0px;
height: 26px;
width: 27px;
background: #98644C;
z-index: -1;
left: 72px;
border-top-right-radius: 100%;
}
#deer .legs .leg-3:before {
content: "";
background: #98644C;
width: 20px;
height: 20px;
position: absolute;
right: -30px;
top: 51px;
border-bottom-right-radius: 100%;
}
#deer .legs .leg-3 .detail {
position: absolute;
right: -6px;
background: #98644C;
width: 20px;
height: 20px;
top: 39px;
transform: rotate(43deg);
}
#deer .legs .leg-3 .detail:after {
content: "";
position: absolute;
right: 8px;
width: 19px;
height: 9px;
background: #98644C;
transform: rotate(20deg);
top: -3px;
}
#deer .legs .leg-4 {
left: 467px;
top: 327px;
background: #C8906F;
width: 86px;
height: 71px;
z-index: 999999999;
/* border-bottom-left-radius: 94%; */
border-radius: 0 0 0 103% / 0 0 0 100%;
transform: rotate(-3deg);
}
#deer .legs .leg-4:after {
content: "";
transform: rotate(3deg);
top: 38px;
right: -29px;
background: #C8906F;
width: 35px;
height: 34px;
position: absolute;
border-radius: 0 93% 0 5px;
}
#deer .legs .leg-4:before {
content: "";
position: absolute;
height: 43px;
width: 58px;
right: -47px;
top: -4px;
transform: rotate(52deg);
border-radius: 50%;
border-bottom: 12px solid #C8906F;
z-index: 1000;
}
#deer .legs .leg-4 .detail-1 {
position: absolute;
background: #C8906F;
height: 28px;
width: 10px;
right: -6px;
top: 21px;
transform: rotate(-30deg);
z-index: 100;
}
#deer .legs .leg-4 .detail-2 {
position: absolute;
background: #C8906F;
height: 20px;
width: 20px;
right: -35px;
top: 46px;
transform: rotate(3deg);
border-radius: 0 0 100% 0;
}
#deer .hooves .hoof {
position: absolute;
background: #7A564A;
}
#deer .hooves .hoof-1 {
width: 28px;
height: 59px;
top: 366px;
left: 224px;
transform: skewX(48deg);
z-index: -3;
}
#deer .hooves .hoof-1:after {
position: absolute;
left: 20px;
background: #7A564A;
height: 57px;
width: 9px;
top: 0;
content: "";
transform: rotate(8deg);
}
#deer .hooves .hoof-1:before {
position: absolute;
content: "";
/* background: red; */
height: 0;
width: 0;
border-style: solid;
border-color: transparent #7A564B transparent transparent;
border-width: 10px 10px 10px 0px;
left: 25px;
transform: skew(-48deg);
top: 31px;
}
#deer .hooves .hoof-1 .claw {
position: absolute;
background: #3E2B25;
width: 15px;
height: 20px;
transform: skew(-48deg);
top: 39px;
left: 25px;
z-index: 100;
}
#deer .hooves .hoof-1 .claw:after {
content: "";
height: 0;
width: 0;
border-style: solid;
border-color: transparent transparent transparent #3E2B25;
border-width: 20px 0 0 14px;
left: 14px;
position: absolute;
top: 0;
z-index: 100;
}
#deer .hooves .hoof-2 {
height: 62px;
width: 16px;
top: 421px;
left: 291px;
z-index: -10;
border-radius: 10px 0 0 0;
}
#deer .hooves .hoof-2:before {
content: "";
background: #7A564A;
position: absolute;
height: 69px;
width: 5px;
right: -2px;
transform: rotate(5deg);
top: -7px;
}
#deer .hooves .hoof-2:after {
content: "";
/* background: red; */
position: absolute;
bottom: 0;
height: 0;
width: 0;
border-style: solid;
border-color: transparent transparent rgb(127, 85, 72) transparent;
border-width: 0 10px 10px 10px;
right: -9px;
}
#deer .hooves .hoof-2 .claw,
#deer .hooves .h
纯CSS3绘制的梅花鹿卡通效果源码.zip （1个子文件） 
132692152264782062 
index.html 21KB资源评论
易小侠
- 粉丝: 6625
- 资源: 9万+
最新资源
- 城镇老旧小区改造（加装电梯）考评内容和评价标准表.docx
- 城镇老旧小区改造及既有住宅加装电梯赋分权重.docx
- 底板隐蔽前监理检查记录.docx
- 出差审批单(表格模板).docx
- 第三方技术服务机构消防验收项目情况工作月汇报表.docx
- 电梯质量安全风险管控清单（安装（含修理）.docx
- 飞机舱位代码表.docx
- 顶板隐蔽前监理检查记录表.docx
- 高危妊娠产前评分标准表.docx
- 高温中暑病例报告卡表格.docx
- 个体工商户营业执照颁发及归档记录表.doc
- 更换输液流程表.docx
- 公务接待审批单(表格模板).docx
- 古今地名对照表.docx
- 固定资产验收单、移交清单、处置清单.docx
- 骨关节损伤鉴定标准条款表.docx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
