使用 CSS 创建星爆效果

如果说我最喜欢我所做的事情中的一件事，那就是解决设计师抛给我的挑战。几乎总有一种方法可以用代码重现设计，我喜欢找出如何使用 CSS 尽可能接近原始设计。

最近，我们在 Sparkbox 的创意总监 Drew 让我为一个电子商务网站构建一个设计。该网站有一个元素，有点像星爆形状，其中包含产品价格。由于它包含动态价格，因此该元素必须相应地增长和调整，因此我着手使用 CSS 构建它。

分解设计

所以我们开始了。我们有一个相当尖锐的圆圈，里面是产品价格。（还要注意 Drew 在这里使用的微妙的内边框。我们稍后会讨论它。）我采用了这个设计并制作了这个

我知道它并不完全相同——它有几个较少的“点”——从技术上讲，我可以用更多的标记来实现，但我认为少用一些标记和减少一些点是值得的。让我们一起了解这里发生了什么。

可视化这里发生的事情

将此星爆视为一系列旋转的方块。我理解这里发生的事情的方式是使用一些便利贴。看看

所以我这里有三个元素，每个元素旋转 30 度。（在最终设计中，我实际上将有六个元素，您会看到……）

标记

<div class="price-container">
  <div class="price">
    <span class="label">Buy</span>
    <span class="number">$15.00</span>
    <span class="label">Now</span>
  </div>
</div>

我有 <div class="price-container">，它包含价格星爆。我将将其用作星爆的背景。<div class="price"> 是内部文本（价格信息）的容器。这就是标记的全部内容。从这里开始，我将使用伪类来创建多个点。此外，我之前提到过 CSS 版本的星爆中有一些较少的点。此标记中没有任何不必要的元素。

设置样式

现在进入有趣的部分。让我概述一下我将要做什么，然后我会向您展示实现它的所需样式。我将设置 .price-container、.price 以及每个元素的 :before 和 :after 伪元素的样式。本质上，我有六个元素可以使用。我创建了这个背景图像以应用于每个元素，并且我将每个元素旋转 15 度

如果您回顾上面便利贴的图片，请注意我如何用铅笔绘制内边框。拆卸便利贴模型给了我一个看起来像这样的部件。

所以这里列出了每个元素的样式（注释应该可以帮助您理解这里发生了什么。我还在下面提供了一些注释。）

.price-container,
.price-container:before,
.price-container:after,
.price-container .price,
.price-container .price:before,
.price-container .price:after {
	height: 8.5em;
	width: 8.5em;
	background: #760B1F url(price-bg.png) top left no-repeat;
	background-size: 8.5em;
}

.price-container:before,
.price-container:after,
.price-container .price:before,
.price-container .price:after {
	content: "";
	position: absolute;
}

.price-container {
	margin: 100px auto; /* Centering for demo */
	position: relative; /* Context */
	top: 2.5em;
	left: 2.5em;
	-webkit-transform: rotate(-45deg);
	  -moz-transform: rotate(-45deg);
	   -ms-transform: rotate(-45deg);
	    -o-transform: rotate(-45deg);
	       transform: rotate(-45deg);
}

.price-container:before {
	top: 0;
	left: 0;
	-webkit-transform: rotate(-30deg);
	  -moz-transform: rotate(-30deg);
	   -ms-transform: rotate(-30deg);
	    -o-transform: rotate(-30deg);
	       transform: rotate(-30deg);
}

.price-container:after {
	top: 0;
	left: 0;
	-webkit-transform: rotate(-15deg);
	  -moz-transform: rotate(-15deg);
	   -ms-transform: rotate(-15deg);
	    -o-transform: rotate(-15deg);
	       transform: rotate(-15deg);
}

.price-container .price {
	padding: .5em 0em;
	height: 7.5em; /* height minus padding */
	position: absolute;
	bottom: 0;
	right: 0;
	-webkit-transform: rotate(45deg);
	  -moz-transform: rotate(45deg);
	   -ms-transform: rotate(45deg);
	    -o-transform: rotate(45deg);
	       transform: rotate(45deg);
	z-index: 1; /* important so the text shows up */
}

.price-container .price:before {
	top: 0;
	left: 0;
	-webkit-transform: rotate(60deg);
	  -moz-transform: rotate(60deg);
	   -ms-transform: rotate(60deg);
	    -o-transform: rotate(60deg);
	       transform: rotate(60deg);
}

.price-container .price:after {
	top: 0;
	left: 0;
	-webkit-transform: rotate(75deg);
	  -moz-transform: rotate(75deg);
	   -ms-transform: rotate(75deg);
	    -o-transform: rotate(75deg);
	       transform: rotate(75deg);
}

关于样式，我将指出几点

• 注意旋转角度的顺序：此顺序很重要，因为最内层元素内将有文本。因此，最后一个元素（文本所在的元素，在本例中为 .price）必须是直的。请注意，.price-container 旋转 -45 度，而 .price 旋转 45 度——回到 0。
• 高度和宽度：由于我们在这里处理背景图像，因此必须设置高度和宽度。我已将其设置为 em，以便在文本大小增加时进行适当调整。
• .price-container .price 有顶部和底部的填充。这就是为什么高度与所有其他元素略有不同的原因。
• 所有内容都绝对定位在第一个容器内。.price-container 有 left: 2.5em 和 top: 2.5em，只是为了稍微移动整个元素。当所有内容都旋转时，角会稍微超出页面和容器。
• z-index：为 .price-container .price 定义了 z-index。这样，此 div 内的价格信息就可见。

现在剩下的就是设置文本样式了。

.price-container .price span {
  position: relative;
  z-index: 100;
  display: block;
  text-align: center;
  color: #FE3D5C;
  font: 1.8em/1.4em Sans-Serif;
  text-transform: uppercase;
}

.price-container .price span.number {
  font-weight: bold;
  font-size: 2.5em;
  line-height: .9em;
  color: #fff;
}

无图像实现

现在，我这里有一些额外的内容，因为设计要求使用这个非常微妙的内边框。如果您不喜欢或不需要内边框，只需删除有关背景图像和背景大小的部分，设计将保持不变。

浏览器支持

这在 IE 9+、Firefox 4.0+、Safari 4.1+ 和 Chrome 3.0+ 中按原样工作。IE 8 及更低版本不支持 background-size，Chrome 1.0、Firefox 3.6 和 Safari 3.0 需要一些供应商前缀。IE8 支持伪元素，但不支持 transform。

回退将是彩色正方形。很可能不是一个大问题。

就是这样

这是一个价格星形元素。足够灵活，可以在您增加字体大小时进行扩展。使用一些 CSS 制作。

查看演示   下载文件