css3制作柠小C
Posted 农佳技
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3制作柠小C相关的知识，希望对你有一定的参考价值。
css3制作柠小C
前言
平日里我们看到的柠小C，都是设计师给的原稿，用的时候直接切图，这次我们来点不一样的，直接用css3画出一个呆萌呆萌的柠小C~
接下来，看看下出自设计师的柠小C与纯css3的柠小C是否真的非常相似呢，真相即将揭晓~
是不是相似度非常高，有了css3制作的柠小C，再也不用担心图片压缩太高而不清晰，或者图片太大影响用户体验了，哈哈哈~好，现在真正切入主题，学习怎么制作完整的柠小C。
正文
先看看柠小C的html结构搭建：
<!--HTML之整个柠小C 的头部结构 -->
<div class="headC">
<!-- 头 -->
<div class="face">
<!-- 脸庞 -->
<div class="hair">
<!-- 头发 -->
<span class="hair-one"></span>
<span class="hair-two"></span>
<span class="hair-three"></span>
</div>
<div class="eyes">
<!-- 眼睛 -->
<div class="leftEye">
<!-- 左眼 -->
<div class="left-blackEye">
<div class="left-white-big"></div>
<div class="left-white-small"></div>
</div>
</div>
<div class="rightEye">
<!-- 右眼 -->
<div class="right-blackEye">
<div class="right-white-big"></div>
<div class="right-white-small"></div>
</div>
</div>
<div class="rightEyeBlink">
<!-- 右眨眼 -->
</div>
</div>
<div class="mouse">
<!-- 嘴巴 -->
<div class="mouse-top"></div>
<!-- 嘴巴形状 -->
<div class="mouse-bottom">
<div class="mouse-tongue"></div>
<!-- 舌头 -->
</div>
<!-- 嘴巴形状 -->
</div>
<div class="blusher">
<!-- 腮红 -->
<div class="left-blusher"></div>
<div class="right-blusher"></div>
</div>
</div>
<div class="ears">
<!-- 耳朵 -->
<span class="left-ear"></span>
<span class="right-ear"></span>
</div>
<div class="heart-block">
<div class="inner-heart"></div>
</div>
<div class="heart-block heart-last">
<!--第二颗心-->
<div class="inner-heart"></div>
</div>
</div>
柠小C的重点--头部
面对这么可爱的柠小C，我们先从头部着手~
带耳朵的头部轮廓样式：
.headC {
position: relative;
top: 0.87rem;
width: 88.5%;
height: 4.93rem;
margin: 0 auto;
background: #ffdc2a;
border-radius: 100%;
z-index: 5;
}
.headC .ears .left-ear, .headC .ears .right-ear {
position: absolute;
top: 50%;
margin-top: -1rem;
width: 3rem;
height: 2rem;
}
.headC .ears .left-ear {
left: -0.35rem;
border-radius: 57% 72% 0% 67%;
border-left: 0.6rem solid #ffdc2a;
}
.headC .ears .right-ear {
right: -0.35rem;
border-radius: 0% 56% 90% 67%;
border-right: 0.6rem solid #ffdc2a;
}
再加上头顶de绿色叶子，看着脱脱的就是一颗柠檬嘛~
再来将脸型添上：
.headC .face {
position: relative;
top: 0.65rem;
width: 5.02rem;
height: 3.63rem;
margin: 0 auto;
background: #ffe6e6;
z-index: 3;
border-radius: 80% 80% 68% 68%;
overflow: hidden;
}
嫩嫩的小红脸出来了，再来配上萌萌的五官：
.headC .face .leftEye, .headC .face .rightEye {
position: absolute;
top: 1.3rem;
width: 0.94rem;
height: 0.94rem;
background: #fff;
border-radius: 100%;
z-index: 5;
}
.headC .face .leftEye:before, .headC .face .rightEye:before {
display: block;
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0.82rem;
height: 0.82rem;
margin: -0.41rem 0 0 -0.41rem;
background: #723900;
border-radius: 100%;
}
.headC .face .leftEye .left-white-big, .headC .face .leftEye .right-white-big, .headC .face .rightEye .left-white-big, .headC .face .rightEye .right-white-big {
position: absolute;
top: 0.07rem;
width: 0.28rem;
height: 0.28rem;
border-radius: 100%;
background: #fff;
}
.headC .face .leftEye .left-white-big, .headC .face .rightEye .left-white-big {
right: 0.18rem;
}
.headC .face .leftEye .right-white-big, .headC .face .rightEye .right-white-big {
left: 0.18rem;
}
.headC .face .leftEye .left-white-small, .headC .face .leftEye .right-white-small, .headC .face .rightEye .left-white-small, .headC .face .rightEye .right-white-small {
position: absolute;
top: 0.27rem;
width: 0.16rem;
height: 0.16rem;
border-radius: 100%;
background: #fff;
}
.headC .face .leftEye .left-white-small, .headC .face .rightEye .left-white-small {
right: 0.44rem;
}
.headC .face .leftEye .right-white-small, .headC .face .rightEye .right-white-small {
left: 0.44rem;
}
.headC .face .leftEye {
left: 0.6rem;
}
.headC .face .rightEye {
right: 0.6rem;
/* -webkit-animation-name: toRightEye; */
/* animation-name: toRightEye; */
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -o-transform-origin: 50% 50%;
}
.headC .face .left-blusher, .headC .face .right-blusher {
position: absolute;
top: 1.91rem;
width: 0.75rem;
height: 0.75rem;
background: #ffc7c7;
border-radius: 100%;
z-index: 2;
}
.headC .face .left-blusher {
left: 0.35rem;
}
.headC .face .right-blusher {
right: 0.35rem;
}
.headC .face .rightEyeBlink {
position: absolute;
top: 1.6rem;
right: 1.47rem;
-webkit-animation-name: toRightEyeBlink;
animation-name: toRightEyeBlink;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -o-transform-origin: 50% 50%;
z-index: 4;
}
.headC .face .rightEyeBlink:before {
display: block;
content: '';
position: absolute;
top: 0.2rem;
width: 0.7rem;
height: 0.7rem;
border-style: solid;
border-color: #723900;
border-width: 0.1rem 0.1rem 0 0;
-webkit-border-radius: 0 3.5rem 0 0;
-moz-border-radius: 0 3.5rem 0 0;
border-radius: 0 3.5rem 0 0;
transform: rotate3d(0, 0, 1, -52deg); -webkit-transform: rotate3d(0, 0, 1, -52deg); -moz-transform: rotate3d(0, 0, 1, -52deg); -o-transform: rotate3d(0, 0, 1, -52deg);
clip: rect(0, 1rem, 0.3rem, 0);
transform-origin: left top; -webkit-transform-origin: left top; -moz-transform-origin: left top; -o-transform-origin: left top;
}
.headC .face .rightEyeBlink:after {
display: block;
content: '';
position: absolute;
top: 0.2rem;
width: 0.9rem;
height: 0.7rem;
border-style: solid;
border-color: #723900;
border-width: 0.1rem 0.1rem 0 0;
-webkit-border-radius: 0 3.5rem 0 0;
-moz-border-radius: 0 3.5rem 0 0;
border-radius: 0 3.5rem 0 0;
transform: rotate3d(0, 0, 1, -7deg); -webkit-transform: rotate3d(0, 0, 1, -7deg); -moz-transform: rotate3d(0, 0, 1, -7deg); -o-transform: rotate3d(0, 0, 1, -7deg);
clip: rect(0, 1rem, 0.22rem, 0);
transform-origin: left top; -webkit-transform-origin: left top; -moz-transform-origin: left top; -o-transform-origin: left top;
}
.headC .face .mouse {
position: absolute;
right: 0;
bottom: 0.9rem;
left: 0;
width: 1.1rem;
height: 0.53rem;
margin: 0 auto;
/* -webkit-animation-name: toMouse; */
/* animation-name: toMouse; */
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-delay: 1s;
animation-delay: 1s;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -o-transform-origin: 50% 50%;
}
.headC .face .mouse .mouse-top {
position: absolute;
top: 0.01rem;
width: 100%;
height: 0.12rem;
background: #c17272;
border-radius: 50% 50% 0 0/100% 100% 0 0;
}
.headC .face .mouse .mouse-bottom {
position: absolute;
bottom: 0;
width: 100%;
height: 0.41rem;
background: #c17272;
border-radius: 0% 0% 50% 50%/0% 0% 100% 100%;
overflow: hidden;
}
.headC .face .mouse .mouse-bottom .mouse-tongue {
position: absolute;
bottom: 0;
width: 100%;
height: 0.24rem;
background: #ffaa9e;
border-radius: 50% 50% 0 0/100% 100% 0 0;
/* -webkit-animation-name: toMouse; */
/* animation-name: toMouse; */
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-delay: 1s;
animation-delay: 1s;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -o-transform-origin: 50% 100%;
}
.headC .hair {
width: 1.93rem;
margin: 0 auto;
z-index: 3;
}
.headC .hair .hair-one, .headC .hair .hair-two, .headC .hair .hair-three {
float: left;
width: 33.3%;
height: 0.78rem;
background: #845400;
}
.headC .hair .hair-one {
border-radius: 0 0 40% 55%;
transform: rotate3d(0, 0, 1, -3deg); -webkit-transform: rotate3d(0, 0, 1, -3deg); -moz-transform: rotate3d(0, 0, 1, -3deg); -o-transform: rotate3d(0, 0, 1, -3deg);
transform-origin: top left; -webkit-transform-origin: top left; -moz-transform-origin: top left; -o-transform-origin: top left;
}
.headC .hair .hair-two {
border-radius: 0 0 50% 50%;
}
.headC .hair .hair-three {
border-radius: 0 0 42% 65%;
transform: rotate3d(0, 0, 1, 7deg); -webkit-transform: rotate3d(0, 0, 1, 7deg); -moz-transform: rotate3d(0, 0, 1, 7deg); -o-transform: rotate3d(0, 0, 1, 7deg);
transform-origin: top right; -webkit-transform-origin: top right; -moz-transform-origin: top right; -o-transform-origin: top right;
}
配上精致的小脸，是不是很有感觉了，嘿嘿嘿~ ，继续努力，一鼓作气，将身体也画上： （ps:身体比较难的一个部分，因为细节点多）
先看看身体的轮廓：
.bodyC {
position: absolute;
top: 5.58rem;
right: 0;
left: 0;
width: 3.14rem;
margin: 0 auto;
overflow: hidden;
}
.bodyC .body-m {
position: relative;
width: 2.13rem;
height: 2.461rem;
margin: 0 auto;
overflow: hidden;
}
由于柠小C的身体不是规则的，这里画起来就有点像缝补丁一样，找有棱有角的地方给他拼起来：
<!--HTML之整个柠小C 的身体结构 -->
<div class="bodyC">
<!-- 身体 -->
<div class="neck"></div>
<!-- 脖子 -->
<div class="trousers">
<!-- 裤子 -->
<div class="body-m-top cloth-color">
<div class="condoleBelt-l"></div>
<!-- 吊带 -->
<div class="condoleBelt-r"></div>
<!-- 吊带 -->
</div>
<div class="body-m-bottom cloth-color">
</div>
<div class="trousers-center"></div>
<div class="pocket"></div>
<!-- 裤袋 -->
<div class="echelon"></div>
<!-- 梯形 -->
</div>
<div class="trousers-bottom-l"></div>
<!-- 裤脚 -->
<div class="trousers-bottom-r"></div>
<!-- 裤脚 -->
<div class="trousers-dot-l"></div>
<!-- c长虚线 -->
<div class="trousers-dot-r"></div>
<!-- c长虚线 -->
<div class="body-m">
<div class="body-m-top">
</div>
<div class="body-m-bottom">
</div>
<div class="body-leg-l"></div>
<div class="body-leg-r"></div>
</div>
<div class="hands">
<!-- 双手 -->
<div class="left-hand">
<div class="hand-top hand-top--l"></div>
<div class="hand-bottom"></div>
</div>
<div class="right-hand">
<div class="hand-top hand-top--r"></div>
<div class="hand-bottom"></div>
</div>
</div>
<div class="backpack">
<div class="back-flesh">
<div class="back-seed seed-one"></div>
<div class="back-seed seed-two"></div>
<div class="back-seed seed-three"></div>
<div class="back-seed seed-four"></div>
<div class="back-seed seed-five"></div>
<div class="back-seed seed-six"></div>
</div>
</div>
<!-- 背包 -->
<div class="backpack-belt"></div>
</div>
看完HTML结构就来给小C穿衣服咯~
这样的柠小C是不是也很可耐很萌呀~
接下来给小C添置蓝色的背带裤：
.bodyC .trousers-bottom-l, .bodyC .trousers-bottom-r {
position: absolute;
bottom: 0.25rem;
width: 0.76rem;
height: 0.22rem;
background: #26ccf9;
border-radius: 0.12rem;
z-index: 4;
}
.bodyC .trousers-bottom-l {
left: 17%;
}
.bodyC .trousers-bottom-r {
right: 17%;
}
.bodyC .trousers-dot-l, .bodyC .trousers-dot-r {
position: absolute;
top: -130%;
width: 5rem;
height: 5rem;
z-index: 3;
}
.bodyC .trousers-dot-l {
left: 7%;
border-left: 0.04rem dotted #26ccf9;
-webkit-border-radius: 5rem 0 0 0;
transform: rotate3d(0, 0, 1, -9.4deg); -webkit-transform: rotate3d(0, 0, 1, -9.4deg); -moz-transform: rotate3d(0, 0, 1, -9.4deg); -o-transform: rotate3d(0, 0, 1, -9.4deg);
}
.bodyC .trousers-dot-r {
right: 7%;
border-right: 0.04rem dotted #26ccf9;
-webkit-border-radius: 0 5rem 0 0;
transform: rotate3d(0, 0, 1, 9.4deg); -webkit-transform: rotate3d(0, 0, 1, 9.4deg); -moz-transform: rotate3d(0, 0, 1, 9.4deg); -o-transform: rotate3d(0, 0, 1, 9.4deg);
}
.trousers {
position: absolute;
right: 0;
left: 0;
width: 2.13rem;
height: 2.12rem;
margin: 0 auto;
overflow: hidden;
z-index: 3;
}
.trousers .trousers-center {
position: absolute;
right: 0;
bottom: 0.44rem;
left: 0;
width: 1.8rem;
height: 0.76rem;
margin: 0 auto;
background: #009bd1;
}
.trousers .condoleBelt-l {
position: absolute;
top: 0;
left: 0.25rem;
width: 0.25rem;
border-top: 1rem solid #009bd1;
border-right: 0.1rem solid transparent;
}
.trousers .condoleBelt-r {
position: absolute;
top: 0;
right: 0.25rem;
width: 0.25rem;
border-top: 1rem solid #009bd1;
border-left: 0.1rem solid transparent;
}
.trousers .pocket {
position: absolute;
right: 0;
left: 0;
bottom: 0.22rem;
width: 1.35rem;
height: 0.55rem;
margin: 0 auto;
border: 0.04rem dotted #26ccf9;
border-radius: 0 0 0.65rem 0.65rem/0 0 0.55rem 0.55rem;
}
.trousers .echelon {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 1.23rem;
height: 1rem;
margin: 0 auto;
z-index: 5;
}
.trousers .echelon:before {
content: '';
position: absolute;
top: -0.4rem;
right: 0;
bottom: 0;
left: 0;
border: 0.04rem dotted #26ccf9;
border-top: none;
transform: perspective(1.7rem) rotateX(15deg); -webkit-transform: perspective(1.7rem) rotateX(15deg); -moz-transform: perspective(1.7rem) rotateX(15deg); -o-transform: perspective(1.7rem) rotateX(15deg);
transform-origin: center; -webkit-transform-origin: center; -moz-transform-origin: center; -o-transform-origin: center;
}
再给小C穿背带裤的过程中也是痛苦的，她的背带裤形状，裤子上的线条口袋装饰都是很需要耐心画的，[可怜]
这个时候的小C看起来是不是有模有样的啦~
接下来把小C最爱的小背包带上：
.bodyC .backpack {
position: absolute;
right: 0.12rem;
bottom: 0.33rem;
width: 1.28rem;
height: 1.28rem;
background: #ffc206;
border-radius: 100%;
z-index: 4;
}
.bodyC .backpack:after {
display: block;
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 1.1rem;
height: 1.1rem;
margin: -0.55rem 0 0 -0.55rem;
background: white;
border-radius: 100%;
}
.bodyC .back-flesh {
position: absolute;
top: 50%;
left: 50%;
width: 1.02rem;
height: 1.02rem;
margin: -0.51rem 0 0 -0.51rem;
background: #ffef90;
border-radius: 100%;
z-index: 1;
}
.bodyC .back-seed {
position: absolute;
width: 0.4rem;
height: 0.24rem;
background: #ffdc2a;
border: 1px solid #fec31f;
border-radius: 0.13rem 0.27rem 0.27rem 0.13rem/0.12rem;
}
.bodyC .seed-one {
top: 50%;
left: 0;
margin: -0.12rem 0 0;
}
.bodyC .seed-two {
top: 23%;
left: 34%;
margin: -0.12rem 0 0 -0.2rem;
transform: rotate3d(0, 0, 1, 60deg); -webkit-transform: rotate3d(0, 0, 1, 60deg); -moz-transform: rotate3d(0, 0, 1, 60deg); -o-transform: rotate3d(0, 0, 1, 60deg);
}
.bodyC .seed-three {
top: 23%;
right: 12%;
margin: -0.12rem 0 0 -0.2rem;
transform: rotate3d(0, 0, 1, 120deg); -webkit-transform: rotate3d(0, 0, 1, 120deg); -moz-transform: rotate3d(0, 0, 1, 120deg); -o-transform: rotate3d(0, 0, 1, 120deg);
}
.bodyC .seed-four {
top: 50%;
right: 0;
margin: -0.12rem 0 0;
transform: rotate3d(0, 0, 1, 180deg); -webkit-transform: rotate3d(0, 0, 1, 180deg); -moz-transform: rotate3d(0, 0, 1, 180deg); -o-transform: rotate3d(0, 0, 1, 180deg);
}
.bodyC .seed-five {
bottom: 10%;
right: 12%;
margin: -0.12rem 0 0 -0.2rem;
transform: rotate3d(0, 0, 1, 240deg); -webkit-transform: rotate3d(0, 0, 1, 240deg); -moz-transform: rotate3d(0, 0, 1, 240deg); -o-transform: rotate3d(0, 0, 1, 240deg);
}
.bodyC .seed-six {
bottom: 10%;
left: 34%;
margin: -0.12rem 0 0 -0.2rem;
transform: rotate3d(0, 0, 1, 300deg); -webkit-transform: rotate3d(0, 0, 1, 300deg); -moz-transform: rotate3d(0, 0, 1, 300deg); -o-transform: rotate3d(0, 0, 1, 300deg);
}
.bodyC .backpack-belt {
position: absolute;
top: -110%;
left: 20%;
width: 4rem;
height: 4rem;
border-top: 0.6em solid transparent;
border-right: 0.6em solid transparent;
border-bottom: 0.6em solid transparent;
border-left: 0.6em solid #723900;
border-radius: 100%;
transform: rotate(-25deg); -webkit-transform: rotate(-25deg); -moz-transform: rotate(-25deg); -o-transform: rotate(-25deg);
z-index: 3;
}
到这里柠小C的制作基本上完成了，接下来的篇幅就是为了给萌萌嗒的小C添加点生气~嘟嘴吐爱心，摇头卖萌，眨眼放电，这样的萌小C你能不爱吗，哈哈哈
点这里可以查看萌萌嗒柠小C咯
https://m.lcfarm.com/html_finance/c.html
建议
里面的动画代码没贴出来，喜欢的话可以直接查看源码，制作的有点粗糙，希望你能喜欢她~
本文作者: 邓丽（农金圈研发团队)，前端攻城狮。
以上是关于css3制作柠小C的主要内容，如果未能解决你的问题，请参考以下文章