在html5中用css画一个笑脸需要先画一个圆脸,然后画两只圆形的眼睛,以及嘴巴,然后调节每个图形的到适当的位置,就可以画出一个笑脸出来了。
方法/步骤
1
在文件夹创建一个test的html文件。
2
在test中写个html的框架。
3
创建一个div,id为face作为脸,并通过css在style中绘制一个圆并填充颜色,要设置position,top与left是设置圆形位置。#face { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; position: absolute; top: 80px; left: 130px;}
4
在浏览器中打开,我们得到一个红色圆形的脸。
5
然后是在face中创建两个div,eye1与eye2作为眼睛,同样是两个圆形填充颜色,并设置位置。
6
在浏览器打开后我们发现脸上多出了两只眼睛。
7
最后是添加一个div,mouth作为嘴巴,是一个月牙形的,transform:rotate设置月牙的旋转。#mouth{ transform:rotate(45deg); width:60px; height:60px; border-radius:50%; box-shadow: 10px 10px 0 0 #ffffff; position: absolute; top:-12px; left:-48px; }
8
最后在浏览器中打开,我们就得到了一个笑脸。
上一篇:怎么练习微笑的表情
下一篇:怎么把照片里面的人脸变成笑脸?