使用CSS3的border-radius属性,我们可以制作圆角或圆形。添加一些渐变效果,就能让他们变成球体。让我们来试试,给这些球体添加一些动画,让效果更接近我们的生活。
扁平化设计(Flat design)
我们有两种方法,可以使用CSS来制作球体。
一个是使用大量的元素标签来创建一个3D球体。比如说下面的一个效果:
其最大的缺点就是要使用很多个元素,这样会影响性能。而且这些效果看起来也有点粗糙,球面也不光滑。
另一个方法就是我们接下来要探讨的方法,利用CSS的渐变和阴影在单个元素上创建3D球体效果。
下面内容中提到的例子都可以在Codepen上找到,或者点击Codepen的编辑链接查看每个示例的源码。
示例中的代码,没有为每个浏览器添加对应的私有前缀。我建议使用Autoprefixer插件根据需要添加浏览器私有前缀。
基本形状
在详细介绍示例效果这前,我们先创建一个最简单的圆形形状。那么我们就从HTML开始吧:
在这里我们使用了
需要把这个元素创建成一个圆,我样只要给它设置一个宽度和高度,并且设置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的