元宵节到了，用css怎么画可爱的元宵，再配上动画呢？

用Html标签和css画元宵节卡通汤圆并且将它制作成了gif动画。两个圆滚滚可爱的小汤圆，各伸出一只小手，拉开了一个横幅“元宵快乐”。

一、整体居中

写html之前，我先将整体布局在一个div里面，设置大小为1200*500像素大小的长方形，并且居中显示。

position 属性规定元素的定位类型。一般常用到的定位有绝对定位absolute，相对定位relative。要让整个文档内容水平居中，垂直居中，那么只需要对该元素设置左边和上面的距离位置，以百分比为单位就是50%。

先看默认的显示位置，为了区分，我将背景颜色设置为白色，这个白色默认的位置在左上。

接下来用到绝对定位position: absolute;距左边和上面的距离是50%，用left: 50%;top: 50%;最后减去元素的高宽的一半就可以了。

.yuanxiao {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1200px;
    height: 500px;
    margin-top: -250px;
    margin-left: -600px;
    background: #fff;
}

关于垂直居中定位的写法不止这一种，还有其他的，比如flex，表格等等，大家都可以去尝试一下。

二、一拆为三

除了要规划好整体的位置外，接下来将这个宽1200，高500像素的长方形拆分为三个部分，文字是一部分，一个小汤圆单独一部分，所以html还要再规划出三个主要的div。

<div class="yuanxiao">
  <div class="tangyuan1">
     <!--小汤圆1-->
  </div>
  <div class="tangyuan2">
    <!--小汤圆2-->
  </div>
  <div class="text">
    <!--文字组合-->
  </div>
</div>

这一步我觉得还是蛮重要的，就好像文件夹分类一样，你可以把一堆文件都给放在桌面，也可以整理出不同的文件夹存放对应的文件，这跟个人习惯有关系。

话又说回来，这里的“一拆为三”可用在后面的css3动画上，两个小汤圆和一组文字在结构上就一目了然了。

三、制作有渐变背景的文字——“元宵快乐”

先分析这张图上有哪些形状，会用到什么css属性。这四个字分别在一个有渐变背景颜色的圆形框里面，并且这四个圆背面有一条线作为他们之间的连线，文字都是居中显示的。

1、会用到css的border-radius属性，给div元素添加圆角边框。

2、会用到css的background属性，给div元素设置背景。

3、渐变圆形里面还有个白色圆形，为减少代码量，会用到css伪元素:after。

Html文档中，我用css无序列表ul，li来标记这四个字。

<div class="text">
    <ul>
      <li>元</li>
      <li>宵</li>
      <li>快</li>
      <li>乐</li>
    </ul>
  </div>

第一步，去除li默认的圆点样式。

.text li {
list-style-type: none;/*取消默认样式*/
}

第二步，设置基本样式。

高宽都为140px的正方形，文字居中，字体颜色白色，字体加粗，字体设置大小为56px，圆角边框调整为100%;定位设置为absolute绝对定位(它的父元素为.text)

.text li {
width: 140px;
height: 140px;
line-height: 140px;/*垂直居中*/
text-align: center;/*水平居中*/
color: #fff;
font-weight: bold;
font-size: 56px;
border-radius: 100%;/*圆角边框*/
position: absolute;/*绝对定位*/
}

第三步，实现渐变色背景。

CSS 定义了两种渐变类型，一种是线性渐变(向下/向上/向左/向右/对角线)，一种是径向渐变(由其中心定义)，我们这里要用到的是线性渐变。

线性渐变必须要两个以上的颜色，它默认的方向是从上到下。观察咱们这个图的渐变颜色，顶部开始是橘黄色，然后到底部过度为深橘色。

.text li {
background: linear-gradient(to bottom, #fd8625 0%, #ea5517 100%);/* 默认从上到下*/
background: linear-gradient(#fd8625 0%, #ea5517 100%);/*去除方向，同上面显示结果一样*/
}

第四步，通过"left", "top", "right" 以及 "bottom" 属性进行定位。

这里我使用了nth-child选择器，指定从第1个到第4个子元素，然后再设置他们的left、top、right、bottom四个方向值。

.text li:nth-child(1) { top: 45px; left: 11px; }
.text li:nth-child(2) { top: 15px; left: 161px; }
.text li:nth-child(3) { top: 16px; left: 313px;}
.text li:nth-child(4) { top: 48px; left: 460px; }

上述，我只使用了上和左来定位，例如第四个，可以用bottom和right。

第五步，伪元素:after插入内容

这里我设置高宽为118px，border为1px的边，圆加起来就是120px，并且距离上面和左边的位置是10px，这个白色的圆形就刚好在渐变色背景圆形的中间，如果不注意有1+1=2像素的边框，直接设置高宽为120px，那肯定是有偏差的。

.text li:after {
content: "";
width: 118px;
height: 118px;
border: #fff 1px solid;
position: absolute;
border-radius: 100%;
left: 10px;
top: 10px;
}

第六步，画弧线，贯穿文字。

弧线的画法，可以参照半圆的写法。假如我们设置了左上角、右上角的值是50%，去掉下边，左右两边的边框

.text li:after {
border-radius: 50% 50% 0 0;
border-bottom: 0;
border-left: 0;
border-right: 0;
}

得到这样的弧线，两边线条细，中间粗，这样好像不符合我们要的线条，我们需要两边都是一样粗细大小的线。

那就尝试画椭圆的方法，并且保留左右两边的边框

.text:after {
border-radius: 50% 50% 0 0/100% 100% 0 0;
border-bottom: 0;
}

弧度和线条粗细都合适，再把之前做好的四个字放上去，写上z-index属性，设置元素的堆叠顺序。就可以完整的呈现“元宵快乐”这部分的图片。

四、小元宵制作

两个小元宵，可以看成是一个不规则的圆形，圆圆的脸蛋，再加上渐变背景色，四肢是用简单的线条来表示。会用到圆角、椭圆、背景线性渐变，阴影(腮红)等。

第一步，先画脸蛋

椭圆或者圆都可以，这里我用了画椭圆的方法，用百分比来设置圆角边框，脸的渐变色不一样，左边的是从上到下渐变有两种颜色过渡，右边的是从左上到右下，有三种颜色过渡，所以在linear-gradient函数上，要加一个指定的角度。

border-radius: 56% 48% 58% 45%/54% 54% 42% 51%;
background: linear-gradient(#fef6ea 30%, #fbbe9b 100%);/*从上到下两种颜色过渡*/
background: linear-gradient( 133deg, #fef6ea 30%, #fbbe9b 60%, #fef6ea 100%);/*角度，三种颜色过渡*/

第二步，画眉毛和眼睛

眉毛是弧线，可以用之前画椭圆的方法，设置了半径后去掉底部的边框。

border: #a14b26 2px solid;
border-radius: 50% 50% 0 0/100% 100% 0 0;
border-bottom: none;

眼睛我用的是圆，圆角设置为100%，眼睛也有颜色过渡，上面深，下面浅，眼睛上面的白色点可以用伪元素:after,:before，然后眼睛周围有3像素白色外圈，这个用border来实现。

border-radius: 100%;
background: linear-gradient(#853610 0%, #c5603a 100%);
border: #fff 3px solid;

使用伪元素来画眼睛上的白点，主要是为了让Html文档看起来更简洁一些，当然你可以使用其他的方法。另外，我直接在伪元素content写上了内容，就是一个实心的. 大小就用fontsize来设置。这样就不用写高宽像素，然后再圆角了。

content: ".";
font-size: 40px;

第三步，腮红和嘴巴

腮红实现呢，是先画一个30px的正方形，再设置圆角100%，将背景颜色设置为透明transparent，最后box-shadow设置阴影位置以及大小范围。

background: transparent;
width: 30px;
height: 30px;
border-radius: 100%;
box-shadow: #fdc6b4 40px 7px 7px;

腮红上的两个小白点，同眼睛一样，都是使用伪元素:after,:before，内容插入.，再设置字体大小。两个小汤圆的嘴型一个成o型，一个是椭半圆向上的，两种颜色过渡，并且周围有白色阴影。

background: linear-gradient( #d82929 40%, #ef6161 100%);
box-shadow: #fff 1px 1px 2px;

第四步，线条四肢

两个小可爱的四肢是简单的线条再加上圆组合的，同样用画半圆弧的方法来实现，再用transform属性值rotate向元素设置旋转。

border: 4px solid #a14b26;
border-radius: 100% 0 0 100%/50%;
border-right: none;
transform: rotate(-5deg);

脚和手用伪元素:after，最后再注意下肢是放在最顶层的，所以还需要写个z-index，设置元素的堆叠顺序为最顶层。

五、加上CSS3动画

CSS animation 属性设置动画名称，完成时间(秒或者毫秒)，多少次数。这里我只设置了名称和完成时间，次数默认1次，如果要无限循环，就把值改成infinite。

.tangyuan1{animation: amove 1s;}
.tangyuan2{animation: bmove 1s;}

@keyframes amove {
from {
left: 160px;
opacity: 0
}
to {
left: 40px;
}
}

@keyframes bmove {
from {
right: 163px;
opacity: 0
}
to {
right: 43px;
}
}

第一次这么认真的写我这画画思路，可能有些细节漏掉了，有兴趣的可以照着画哦，这里面涉及到的css属性基本上都有。画完你会发现css肯定进步了不少。

最后附上预览地址→https://www.tjcblog.com/yxkl.html

祝大家元宵节快乐~