h5球的立体效果_CSS3制作球体

使用CSS3的border-radius属性，我们可以制作圆角或圆形。添加一些渐变效果，就能让他们变成球体。让我们来试试，给这些球体添加一些动画，让效果更接近我们的生活。

扁平化设计(Flat design)

我们有两种方法，可以使用CSS来制作球体。

一个是使用大量的元素标签来创建一个3D球体。比如说下面的一个效果：

其最大的缺点就是要使用很多个元素，这样会影响性能。而且这些效果看起来也有点粗糙，球面也不光滑。

另一个方法就是我们接下来要探讨的方法，利用CSS的渐变和阴影在单个元素上创建3D球体效果。

下面内容中提到的例子都可以在Codepen上找到，或者点击Codepen的编辑链接查看每个示例的源码。

示例中的代码，没有为每个浏览器添加对应的私有前缀。我建议使用Autoprefixer插件根据需要添加浏览器私有前缀。

基本形状

在详细介绍示例效果这前，我们先创建一个最简单的圆形形状。那么我们就从HTML开始吧：

在这里我们使用了

元素，实际上可以是任何HTML元素。在HTML5中，

表示的是一幅图像或图像的一部分内容，移除内容也不会影响需要表达的语义。

需要把这个元素创建成一个圆，我样只要给它设置一个宽度和高度，并且设置border-radius值为50%。border-radius值只要超过50%就能制作一个圆。当然，其前提是元素的width和height是相同(即是一个正方形)。

.circle {

display: block;

background: black;

border-radius: 50%;

height: 300px;

width: 300px;

margin: 0;

}

这个时候，你看到的效果如下所示：

现在，我们已经有了一个基本的圆，我们可以在这个基础上添加一些样式，让其变成球形。

CSS其实不仅仅能制作出圆形，其还可以制作出更多图形，如果你对这方面感兴趣，可以阅读早期分享过的《CSS制作图形速查表》和《纯CSS制作的图形效果》。

Shading 101

大多数3D球体的教程做的第一件事情就是添加一个径向渐变，颜色淡一点，并且整圆心偏左一点。

我们可以使用下面的这段CSS代码：

.circle {

display: block;

background: black;

border-radius: 50%;

height: 300px;

width: 300px;

margin: 0;

background: radial-gradient(circle at 100px 100px, #5cabff, #000);

}

这个时候，效果就变成这样：

径向渐变

radial-gradient属性需要一些参数。第一个是渐变的圆心。在此之前一般是从shape所在的position来定。在这个示例中，圆心的位置是(100px,100px)。

接下来要指定一系列的颜色。你可以指定两个以前的颜色，同时需要给他们指定对应的位置，让他们有一定的距离，使渐变颜色能更好的融入在一起。

本例中指定了两个颜色。第一个颜色从0%慢慢过渡到位置在100%位置的颜色。如果我们想要其他的渐变效果，可以指定距离，指定距离可以使用像素或百分比。在接下来的示例中，我们可以看到。

现在的3D效果看起来有点“3D-ish”。没关系，我们可以让其变得更好看一点。

阴影和3D效果

在球面上取用不同的材质，你可以创建出不同的球体效果。首先我们需要有一个地方可以用来创建。

在前面的基础上，我们再添加两个元素：

在ball元素中添加一个span元素用来创建球体的影子效果，而且把它们放在一个名为stage的

元素内。这个div.stage是很有用的，我们可以给其