花从何来(:before+:after)

原Demo，觉得好玩儿，照葫芦画瓢了一下：

最终的效果：Demo。

在这个效果里面，有很多的“花瓣”,我们需要考虑的就是这些“花瓣”从哪里来，如何分散到四周等等。

在HTML中，最基本的只需要一个元素就好了，这里我放一个div.flower(~~为了好看，还是在里面放一个笑脸吧~~)。

<div class="flower">
	<h1>\^_^/</h1>
</div>

但是花瓣从哪里来呢？此时页面上只有一个元素(除了笑脸，它是绿叶,扶持外面的div而已)，可以凭空冒出来元素吗？是的，可以冒出来，因为我们还有:before和:after可以用，但是这也才只是多了两个元素而已啊？Demo里好像很多花瓣的样子~~。

不要着急，待我慢慢叙来

实现方法

基本样式

下面是设置元素的基本样式，即大小、颜色、圆形等等：

.flower {
	background: #fff;
	border-radius: 50%;
	cursor: pointer;
	position: relative;
	margin: 0 auto;
	width: 15em;
	height: 15em;
	overflow: hidden;
}

现在得到的只是一个白色的圆形而已。

“花瓣”box-shadow

在画第一个花瓣之前，我们让.flower的:before和:after现身(让它们和.flower一个模样)：

.flower:before,
.flower:after {
	content:"";
	position: absolute;
	top: 0; left: 0;
	width: inherit;
	height: inherit;
	border-radius:50%;
}

这样设置完之后，如何开花呢？别忘了，我们还有box-shadow。
下面，我们来给伪类元素添加box-shadow

.flower:before,
.flower:after{
	box-shadow: inset 10.6em 0 0 rgba(30, 140, 209, 0.2);
}

此时在浏览器的效果是这样的：

flower1

你可以点击:Demo 进行查看效果。

我们设置了两个伪类元素的box-shadow颜色和偏移量，但是这样是没意义的，因为两个伪类元素设置同样的东西，重叠了，所以我们把:after或者:before中的其中一个旋转45度：

.flower:after {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}

现在得到：

flower2

你可以点击：Demo进行查看效果。

可是，花瓣不够多啊！是的，所以还需要继续加，怎么加呢？上面，我们只给了box-shadow设置了一组值，现在多加几组：

.flower:before,
.flower:after {
	box-shadow: inset 10.6em 0 0 rgba(30, 140, 209, 0.2),
		inset 0 10.6em 0 rgba(30, 140, 209, 0.2),
		inset -10.6em 0 0 rgba(30, 140, 209, 0.2),
		inset 0 -10.6em 0 rgba(30, 140, 209, 0.2);
}

现在得到：

flower3

你可以点击Demo进行查看效果。

现在花瓣已经都有了，但是只有一种颜色，于是鼠标经过时，我们让它变种颜色(也额外的加了一些动画)：

.flower:hover:before,
.flower:hover:after {
	box-shadow: inset 0.86em 0 0 rgba(255, 0, 0, 0.5),
		inset 0 0.86em 0 rgba(252, 150, 0, 0.5),
		inset -0.86em 0 0 rgba(0, 255, 0, 0.5),	
		inset 0 -0.86em 0 rgba(0, 150, 255, 0.5);
}

截图效果：

flower4

最后的Demo。