炫意html5
最早CSS3和HTML5移动技术网站之一

CSS3 Olympic Logo

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

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

Olympic Logo

 

<<Click me to show the logo>>

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

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

本文地址http://www.chengxuyuans.com/web_technology/22469.html

炫意HTML5 » CSS3 Olympic Logo

CSS3教程HTML5教程