艺灵设计

全部文章
×

初次尝试实现chrome浏览器的logo

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2013-11-26 16:38:20 - 阅: - 评:0 - 积分:0

话说学习div这么久了,天天重复着无聊的工作,一点长进都没有。于是,今天洒家开始捣鼓了一个好玩的logo。是什么logo呢?就是洒家经常用的chrome浏览器的logo。效果预览如下。

怎么样,看上去是不是有三分相似了。可不要以为这个是用什么高端大气的"canvas"画的,也不是低调奢华的"svg",其实都是div进行拼凑啦。chrome那个logo是渐变色,由于洒家水平有限,洒家拉了好久也没拉出来,索性不拉了,留给好学的小朋友们拉渐变。下面来进行下洒家的思路分析,以下分析均为洒家个人观点,如有雷同,纯属坑爹!

仔细看看这个logo,整体是一个圆形,然后中间是一个小圆,小圆外围是三个说扇形不扇形的形状,分开来算的话,需要5个div。各个div填充自己的颜色,然后定位,有3个div需要配合"rotate"做好旋转的工作。

好了,大致流程就是这样,当然这个方法并不一定正确,只以实现最终效果为准,欢迎好学的小朋友们提出更好的方法。

点此下载→→【代码】初次尝试实现chrome浏览器的logo.zip 

注:本文预期效果的思路与方法均为个人观点,不代表大众,准确性不做保证,以实现最终效果为标准!代码仅供读者参考。

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:http://www.yilingsj.com/css3/2013-11-26/120.html

若亲不想直保留地址,含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载,随便修改,但请尊重艺灵的劳动成果!谢谢理解。

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: css3属性做logo transform -linear-gradient 背景渐变 logo制作 canvas rotate 绘制圆形

上一篇: 纯css3做的单重轮播   下一篇: css3导航特效之跟随鼠标一

评论区