用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
祝大家元宵节快乐~