使用 css 代码画一只玉兔，迎中秋佳节

Sponsor

前言：中秋佳节，大家都在讨论月饼啊、嫦娥啊，但我们怎么能忘了可爱的玉兔呢。今天我们就来用 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 轴倾斜一定的角度。

结语

代码虽然简单，但也是学以致用的一种体现，多结合不同的技巧，可以更好的帮助我们理解。

作者：CatWatermelon 来源：稀土掘金

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。