进步博客

CSS3制作多角星

原文:CSS3 Starbursts

http://matthewjamestaylor.com/blog/css3-starbursts

最近我体验了下css3的rotation(旋转)属性,发现可以用来制作多角星而且不用使用图片。我们所需要的只是一些嵌套的块级元素,通过为它们设置不同的旋转角度来实现。通过设置rotation可以将盒子的角(corner)沿着星星的圆周分布。

首先,我创建了一个16角星,通过使用三个包含在a标签内的嵌套的span元素实现,效果如下图所示:

上面的星星效果只能在支持CSS3 rotation属性的浏览器下看到,目前有safari,Firefox和Google chrome。其他浏览器下就被优雅降级为一个普通的黄色方块。我把在safari下的效果截图贴上,以便于你可以看到在现代浏览器下的效果。下面是HTML代码,只用了一个链接和3个span标签:

<div>
  <a href="#" class="starburst">
    <span>
      <span>
        <span>NEW CSS3Starbursts!</span>
      </span>
    </span>
  </a>
</div>

css代码稍微有点长,我高亮了rotation属性部分的代码,一个是为Firefox设置(前缀为-moz-),一个为webkit(前缀为-webkit-),另一个是标准的rotation规则。

.starburst {
	display:block;
	width:6em;
	height:6em;
	background:#fe0;
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	rotation:-45deg;
	position:relative;
	top:2em;
	left:2em;
	text-align:center;
	text-decoration:none;
	color:#000;
	font-weight:bold;
	font-family:Arial, sans-serif;
}
.starburst span {
	display:block;
	width:6em;
	height:6em;
	background:#fe0;
	-webkit-transform:rotate(22.5deg);
	-moz-transform:rotate(22.5deg);
	rotation:22.5deg;
}

让星星动起来

如果你使用css3创作星暴的话,可以比使用图片制作实现更多的效果。 使用了圆角(rounded border), 文本阴影(text-shadow), 过渡和变形的动画效果(animations with transitions and transforms, and also translations)。动画效果只有在Safari 或Google Chrome下才能看到。下面是一些demo截图:

本例的特点

1.无css hack

2.兼容iPhone,iPod Touch,&iPod

3.SEO友好

4.不需要图片

5.不需要Javascript

6.兼容缩放文本(使用em单位)
查看DEMO