伦敦奥林匹克运动会将于当地时间2012年7月27日晚7点召开。

在这里小小介绍一下奥林匹克运动会和五环。奥林匹克每四年举行一 次,最早起源于古希腊的奥林匹亚,因此得名。奥林匹克五环标志,即我们简称的“奥运五环”,是由皮埃尔·德·顾拜旦于1913年设计完成的。五个环分别 是:蓝色代表的欧洲、黄色代表的亚洲、黑色代表的非洲、绿色代表的大洋洲和红色代表的美洲。五个圆环互相嵌套,寓意着五大洲的人民和平共处的心愿。

Olympic Logo

<<Click me to show the logo>>

代码大家用调试工具看吧,虽然这个图看上去很简单,我还是写了一长串的。

在这里主要用了CSS3的border-radius属性来画圆圈,在写代码的过程中比较头痛的就是每个圆环都有白色的内边框和外边框,还有每个圆环的叠放次序,一部分在上,一部分在下,让我纠结了很久,最后只能用“补丁”来解决。当然代码可能不尽如人意,写的可能不是最精简最完美,大家将就看看吧。灌水有益,酌情吐槽。

 

后来我再思索了一下~确实会有更方便的方法~上一个demo中,div是圆环,div的before和after伪元素分别是内边框和外边框,其实可以这样做:还是用div来做圆环,用一个伪元素(before或者after都行),来做一个白色的、比有色圆环大一圈的同心圆,垫在有色圆环下面,这样的话就能节省CSS代码。唯一可能比较费劲的是before和after伪元素一定会该在div的上方,无论怎么调z-index属性都没用。这个很恶心,我google了一下确实会产生这样的情况,比较方便的解决方法是:可以用伪元素来写圆环,用div来写点在下面的同心圆,这样的话伪元素写的圆环肯定就在同心白色圆环的上方了。

由于最近事情比较多,我只是稍微试了一下可不可行(结果是可行的),demo还没有制作完成~大家可以自己尝试一下~我觉得做了一个demo再把它优化是很happy的事情~~~哈哈

本文作者:admin 转载请注明来自:携程设计委员会