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

语言: CN / TW / HK

前言:中秋佳节,大家都在讨论月饼啊、嫦娥啊,但我们怎么能忘了可爱的玉兔呢。今天我们就来用 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 向元素应用 2D3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

rotate :用来将元素旋转给定的角度。可以按照度数、刻度、弧度或转角设置角度。本文使用角度设置,单位为 deg

transform :本文中使用到了 skewX 倾斜, translateX 沿 x 轴移动。使用绝对定位搭配 translateX 还可以实现未知宽度的横向居中。 skewXx 轴倾斜一定的角度。

结语

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

作者:CatWatermelon 来源:稀土掘金

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。