阿里云双十一
您当前的位置:首页 > 网站制作 > 前端设计

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

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

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

一、整体居中

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

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

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

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

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

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

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

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

二、一拆为三

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

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

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

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

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

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

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

先分析这张图上有哪些形状,会用到什么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 定义了两种渐变类型,一种是线性渐变(向下/向上/向左/向右/对角线),一种是径向渐变(由其中心定义),我们这里要用到的是线性渐变。

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

元宵节到了,用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四个方向值。

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

.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,那肯定是有偏差的。

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

.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;
}

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

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

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

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

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

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

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

四、小元宵制作

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

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

第一步,先画脸蛋

椭圆或者圆都可以,这里我用了画椭圆的方法,用百分比来设置圆角边框,脸的渐变色不一样,左边的是从上到下渐变有两种颜色过渡,右边的是从左上到右下,有三种颜色过渡,所以在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%);/*角度,三种颜色过渡*/

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

第二步,画眉毛和眼睛

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

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

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

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

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;

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

第四步,线条四肢

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

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

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

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

五、加上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属性基本上都有。画完你会发现css肯定进步了不少。

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

祝大家元宵节快乐~

你觉得文章内容怎么样

阿里云代金券 100 云产品通用

有效期30天 首购用户

立即领取
阿里云代金券 100 云产品通用

有效期30天 复购+升级

立即领取