我正在参加「码上挑战赛」概况请看：码上挑战赛来了！
作用完成
页面结构
咱们这儿用一个id为
app的盒子，里边放了心爱月饼的眼睛，嘴巴，花边等，首要是为了避免变形
<div id="app">
<!-- 内容 -->
<div>
<!-- 眼睛 -->
<ul class="eye">
<li></li>
<li></li>
</ul>
<!-- 鼻子 -->
<div class="nose"></div>
<!-- 酒窝 -->
<ul class="dimple">
<li></li>
<li></li>
</ul>
<!-- 嘴巴-->
<div class="mouth">
</div>
<!-- 名字 -->
<span class="text">心爱月饼</span>
</div>
<!-- 花边边 -->
<ul class="lace">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
心爱月饼主体
咱们清楚默认款式，然后在将
#app盒子固定定位放到页面水平中心方位，间隔头部有一定的间隔，内容盒子和花边盒子一模一样大并经过绝对定位定位好方位，它们两个的方位是一样的
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
#app {
position: fixed;
left: 50%;
width: 400px;
height: 400px;
transform: translate(-50%);
}
#app>div,
.lace {
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
}
心爱月饼花边完成
花边完成咱们经过无序列表的方式进行完成，在无序列表中声明多个子元素，一个子元素代表着一个花边，然后经过定位以及旋转特点放到适宜的方位，这儿的旋转视点咱们运用360度为一圈的特性，运用360除以多少个花边得出每个花边的旋转视点最终得出一个圆形花边，咱们这儿用了18个花边，所以运用360/18得出每个只需要旋转20度，然后在经过
translateY设置和中心点的间隔，最终给花边设置上背景色和边框以及设置为圆形
.lace>li {
position: absolute;
top: -10px;
left: -10px;
width: 70px;
height: 70px;
border-radius: 50%;
background: #f5cb91;
list-style: none;
border: 5px solid #f6a11a;
}
.lace>li:nth-child(1) {
transform: rotateZ(20deg) translateY(180px);
}
.lace>li:nth-child(2) {
transform: rotateZ(40deg) translateY(180px);
}
.lace>li:nth-child(3) {
transform: rotateZ(60deg) translateY(180px);
}
.lace>li:nth-child(4) {
transform: rotateZ(80deg) translateY(180px);
}
.lace>li:nth-child(5) {
transform: rotateZ(100deg) translateY(180px);
}
.lace>li:nth-child(6) {
transform: rotateZ(120deg) translateY(180px);
}
.lace>li:nth-child(7) {
transform: rotateZ(140deg) translateY(180px);
}
.lace>li:nth-child(8) {
transform: rotateZ(160deg) translateY(180px);
}
.lace>li:nth-child(9) {
transform: rotateZ(180deg) translateY(180px);
}
.lace>li:nth-child(10) {
transform: rotateZ(200deg) translateY(180px);
}
.lace>li:nth-child(11) {
transform: rotateZ(220deg) translateY(180px);
}
.lace>li:nth-child(12) {
transform: rotateZ(240deg) translateY(180px);
}
.lace>li:nth-child(13) {
transform: rotateZ(260deg) translateY(180px);
}
.lace>li:nth-child(14) {
transform: rotateZ(280deg) translateY(180px);
}
.lace>li:nth-child(15) {
transform: rotateZ(300deg) translateY(180px);
}
.lace>li:nth-child(16) {
transform: rotateZ(320deg) translateY(180px);
}
.lace>li:nth-child(17) {
transform: rotateZ(340deg) translateY(180px);
}
.lace>li:nth-child(18) {
transform: rotateZ(360deg) translateY(180px);
}
心爱月饼的内容盒子完成
花边盒子和内容盒子咱们初始设置的时分将它们设置到了同样的方位，也是为了让内容展示在花边的中心，咱们给内容设置好边框和背景色
#app>div {
box-sizing: border-box;
top: 32px;
left: 32px;
width: 385px;
height: 385px;
z-index: 9;
background-color: rgb(254, 166, 43);
border: 5px solid #b62b00;
user-select: none;
cursor: pointer;
}
心爱月饼的眼睛完成
眼睛用无序列表进行完成，flex布局结合定位，将眼睛定位到对应的方位，在运用css的边框特点勾画出眼睛的款式
/* 眼睛 */
.eye {
width: 200px;
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
top: 100px;
left: 50%;
transform: translate(-50%)
}
.eye li {
width: 60px;
height: 30px;
border-radius: 60px 60px 0 0;
border: 3px solid #000;
border-bottom: none;
}
心爱月饼的鼻子完成
经过css特点写出鼻子的款式后用定位放到适宜的方位
/* 鼻子 */
.nose {
position: absolute;
top: 140px;
left: 50%;
transform: translate(-50%);
width: 70px;
height: 20px;
border-radius: 50%;
background: #e67915;
}
心爱月饼的酒窝完成
酒窝用无序列表完成，运用css设置好酒窝的款式后，flex布局结合定位放到适宜的方位
/* 酒窝 */
.dimple {
position: absolute;
top: 200px;
left: 50%;
transform: translate(-50%);
width: 300px;
display: flex;
justify-content: space-between;
align-items: center;
}
.dimple li {
width: 70px;
height: 30px;
border-radius: 50%;
background: #fece66;
}
心爱月饼的嘴巴完成
咱们设置好款式之后，经过定位放到指定方位在经过css旋转以下，旋转往后在经过
clip进行切割以下，设置好背景色之后，经过box-shadow完成舌头的款式，在运用伪元素完成舌头上的点操作
/* 嘴巴 */
.mouth {
position: absolute;
top: 240px;
left: 50%;
transform: translate(-50%) rotate(90deg);
width: 100px;
height: 70px;
border-radius: 50%;
border: 3px solid #000;
background: rgb(243, 196, 7);
transform-origin: center center;
clip: rect(0 auto auto 40px);
box-shadow: 50px 0px 0 0px #b62b00 inset;
}
.mouth::after {
content: "";
position: absolute;
top: 28px;
left: 53px;
width: 10px;
height: 10px;
background: #fff;
border-radius: 50%;
}
心爱月饼名称完成
写好内容，用css设置好字体款式，定位好方位
.text {
position: absolute;
top: 20px;
left: 50%;
transform: translate(-50%);
font-size: 25px;
color: #fff;
}
代码我放到码上上了，感兴趣的我们可以看一下！
坚持尽力，无惧未来！
