加载中…

加载中...

css3制作哆啦A梦

转载 2017-01-11 11:16:22
标签:web前端css

效果图:

 哆啦A梦 

圆的制作

利用border-radius制作圆

其中width与height值相同,border-radius值与width的一半,即半径。

在哆啦中表现为、手掌、铃铛内黑点、鼻子、鼻子内白点。

椭圆的制作

 利用border-radius制作圆

​其中width与height值不相同,border-radius值为width的一半/height的一半。

​在哆啦中表现为脸、眼睛、眼瞳孔。

​圆角矩形制作

​width与height取值为所需矩形,border-radiu取值为四个角为四分之一圆的半径,较小,看效果调节。

在哆啦表现为脖、脚掌、铃铛中的横杆。

半圆的制作​:

​width取值为height的两倍,border-radius所需角取值为height或者width,其他取值为0。

在哆啦中表现为肚子和百宝袋,两脚间缝隙。

弧线的制作:​

​跟椭圆、圆制作一样。

1、边框只设置一个就变成了弧线。两边细。较长,细线增长了四分之一弧。(最佳

​2、把其他边框颜色设置成transparent,即透明。一样粗细。四分之一弧。

3、​半圆去掉下边框。一样粗细。半圆弧。

​在哆啦中表现为左眼瞳和笑容。

斜线的制作

​width为1px,height为长度,或者相反。在div的样式中添加上图属性,括号内为旋转角度。

在哆啦中表现为须。手臂设置宽度进行旋转。

       在编写过程中,要特别注意顺序,从而使重叠能达到预期的效果。细节方面可以自己进行调节。

阅读(0) 评论(0) 收藏(0) 转载(0) 举报
分享

评论

重要提示:警惕虚假中奖信息
0条评论展开
相关阅读
加载中,请稍后
destiny0904
  • 博客等级:
  • 博客积分:0
  • 博客访问:178
  • 关注人气:0
  • 荣誉徽章:

相关博文

新浪BLOG意见反馈留言板 电话:4006900000 提示音后按1键(按当地市话标准计费) 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

新浪公司 版权所有