AdobeEdu
前言：中秋佳节，大家都在讨论月饼啊、嫦娥啊，但我们怎么能忘了可爱的玉兔呢。今天我们就来用 css 画一只玉兔出来。
演示：
代码
HTML代表
<div class="container">
<div class="rabbit">
<div class="head">
<div class="left-ear ear"></div>
<div class="right-ear ear"></div>
<div class="left-eye eye"></div>
<div class="right-eye eye"></div>
<div class="nose"></div>
</div>
<div class="body">
<div class="left-hand hand"></div>
<div class="right-hand hand"></div>
<div class="left-leg hand"></div>
<div class="right-leg hand"></div>
<div class="tail"></div>
</div>
</div>
</div>
CSS代码
body {
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.rabbit {
position: relative;
}
.head {
position: absolute;
height: 50px;
width: 50px;
border-radius: 50%;
border: 1px solid #000;
z-index: 333;
}
.ear {
position: absolute;
border: 1px solid #000;
border-bottom: none;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
transform: skewX(20deg);
background-color: #fff;
width: 12px;
top: -40px;
}
.ear::after {
content: '';
width: 6px;
width: 50%;
height: 84%;
border-radius: 10px;
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%);
top: 5px;
background-color: pink;
}
.left-ear {
left:-4px;
height: 50px;
transform: skewX(20deg);
}
.right-ear {
right:14px;
height: 45px;
transform: skewX(10deg);
}
.eye {
position: absolute;
top: 32%;
width: 8px;
height: 10px;
border-radius: 50%;
transform: skewX(4deg);
background-color: rgba(0, 0, 0, 0.896);
}
.eye::after {
position: absolute;
content: '';
width: 4px;
height: 4px;
border-radius: 50%;
transform: skewX(4deg);
background-color: #fff;
}
.left-eye {
left: 14px;
}
.right-eye {
right: 6px;
}
.nose {
position: absolute;
bottom: 10px;
left: 60%;
transform: translateX(-50%);
width: 8px;
height: 8px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.325);
}
.body {
border: 1px solid #000;
width: 80px;
height: 60px;
border-radius: 46%;
position: absolute;
top: -0px;
left: -82px;
z-index: -3;
}
.hand {
position: absolute;
bottom: -10px;
height: 20px;
width: 10px;
border-radius: 40%;
border: 1px solid #000;
transform: skewX(10deg);
}
.right-hand {
transform: skewX(26deg);
right: 8px;
animation: leg 0.5s alternate infinite;
}
.left-hand {
right: 21px;
animation: leg 0.5s alternate infinite;
}
.right-leg {
left: 15px;
transform: skewX(-26deg);
animation: hand 0.5s alternate infinite;
}
.left-leg {
left: 26px;
transform: skewX(-10deg);
animation: hand 0.5s alternate infinite;
}
.tail {
position: absolute;
left: -10px;
top: 3px;
height: 14px;
width: 14px;
border-radius: 50%;
border: 1px solid #000;
}
@keyframes hand {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(60deg);
}
}
@keyframes leg {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-60deg);
}
}
涉及知识点
position
relative 相对定位是一个非常容易理解的概念，如果将一个元素设置为相对定位，可以设置其水平位置和垂直位置，这个元素相对于元素的起点开始移动。需要注意的一个地方是，相对定位的元素虽然位移了，但是原本位置的空间 仍是被占据的 。
absolute 绝对定位，绝对定位是相对于非 static 定位的元素来说的，如果没有，则默认为 body 。工作中我们经常的使用 relative 给父元素，子元素设置为 absolute 来设置子元素的位置。
伪元素 ::after
用来向选中的元素后插入一个内容，通常配合 content 属性使用，来指定要插入的内容。
transform 变换
transform 向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
rotate：用来将元素旋转给定的角度。可以按照度数、刻度、弧度或转角设置角度。本文使用角度设置，单位为 deg 。
transform：本文中使用到了 skewX 倾斜，translateX 沿 x 轴移动。使用绝对定位搭配 translateX 还可以实现未知宽度的横向居中。skewX 向 x 轴倾斜一定的角度。
结语
代码虽然简单，但也是学以致用的一种体现，多结合不同的技巧，可以更好的帮助我们理解。
以上内容就是“使用 css 代码画一只玉兔，迎中秋佳节”的全部内容了，喜欢的小伙伴记得点赞收藏，也可以分享给身边感兴趣的朋友。如果你还想了解更多前端设计的相关内容，可以来AdobeEdu设计联盟官方网站获取
