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是很有⽤的，我们可以给其设置⼀些⾓度和影⼦的位置，让3D球体看起来更具3D效果。
给他们应⽤⼀些样式代码：
.
stage {
width: 300px;
height: 300px;
display: inline-block;
margin: 20px;
perspective: 1200px;
perspective-origin: 50% 50%;
}
.ball .shadow {
position: absolute;
好看的css代码width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
transform: rotateX(90deg) translateZ(-150px);
z-index: -1;
}
请注意，在这演⽰的代码没有添加浏览器前缀，但在Codepen上的⽰例都已添加了前缀。在上⾯的⽰例中，给div.stage设置了perspective的值为1200px。这个perspective属性对于3D变形来说⾄关重要。该属性会设置查看者的位置，并将可视内容映射到⼀个视锥上，继⽽投到⼀个2D视平⾯上。如果不指定透视，则Z轴空间中的所有点将平铺到同⼀个2D视平⾯中，并且变换结果中将不存在景深概念。简单点说，perspective让⼀个舞台看起来在⼀个3D场景中。
有关于perspective属性的详细介绍，可以阅读《Transform-style和Perspective属性》。
然后使⽤渐变给球体制作⼀个阴影，并且给它设置⼀个transform效果，转换阴影位置。你可以使⽤rot
ate、scale、translate或者skew在3D空间中改为阴影位置。球体的阴影在X轴旋转了90deg，然后Z轴向下推150px。
我们给舞台容器stage设置了⼀个perspective值，我们往下看，可以看到⼀个椭圆形。
现在的效果看起来⽐以前好多了，接下来给它添加更多的材质效果，让其看起来更像⼀个3D球体。
着⾊
在现实世界 中你很难从⼀个⾓度到对象。表现光线反射到其他表⾯上，最终和不同的光源混合 在⼀起。使⽤⼀个伪元素添加两个渐变效果，让其看起来有两种光源结合在⼀起，如此⼀来可以创建⼀个更接近真实的球体。
.ball {
display: inline-block;
width: 100%;
height: 100%;
margin: 0;
border-radius: 50%;
position: relative;
background: radial-gradient(circle at 50% 120%, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
}
.ball:before {
content: "";
position: absolute;
top: 1%;
left: 5%;
width: 90%;
height: 90%;
border-radius: 50%;
background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%);
filter: blur(5px);
z-index: 2;
}
上⾯⽤了两个稍微复杂的渐变。
在ball元素上⽤了⼀个渐变创建了⼀弱光的效果，渐变的中⼼定位在元素的(50% 120%)位置。这样做，让结束的颜⾊不明显，渐变看起来过渡效果更流畅。
第⼆个渐变放在顶部，⽽且更亮，⽽且其⼤⼩是球体的90%宽和⾼。渐变以圆⼼为中⼼，向下逐渐消失。
这⾥我们使⽤:before创建阴影⽽不是使⽤⼀个新元素来创建。
⾃从渐变有锋利的边缘效果，我们曾使⽤blur来软化这个锋利的边缘，不让它看上去那么突出。不幸的是，到⽬前为⽌，这个属性只有Webkit内核浏览器(Chrome和Safari)⽀持，但其他浏览器在未来也有可能会⽀持。
两个渐变效果组合之后，效果看起来更好：
Shinier
到⽬前为⽌，效果看起来很暗，让我们给效果添加⼀些光泽和创建⼀个斯诺克球。
为了实现这⼀⽬标，我们将利⽤柔和的光线，调整突出的顶部。我们需要利⽤两个伪元素来做这个效果。
.ball {
display: inline-block;
width: 100%;
height: 100%;
margin: 0;
border-radius: 50%;
position: relative;
background: radial-gradient(circle at 50% 120%, #323232, #0a0a0a 80%, #000000 100%);
}
.ball:before {
content: "";
position: absolute;
background: radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%);
border-radius: 50%;
bottom: 2.5%;
left: 5%;
opacity: 0.6;
height: 100%;
width: 90%;
filter: blur(5px);
z-index: 2;
}
.ball:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 5%;
left: 10%;
border-radius: 50%;
background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);
transform: translateX(-80px) translateY(-90px) skewX(-20deg);
filter: blur(10px);
}
这⾥在球体最初的颜⾊做了⼀个微秒的变化。同时在:before伪类上写了⼀个更突出的效果，这个效果再次从球体的底部向球的表⾯反射光。
接下来添加了下新的伪类:after，在这个伪类上使⽤⼀个从中⼼开始由⽩⾊过渡到透明(⼤约是在24%的
位置)的径向的渐变。这将创建了⼀个⽩⾊闪亮的效果，为了让它看上去更像⼀个反射的三维对像，我们在上⾯使⽤CSS的transform。
使⽤transform属性，将元素向左移80px(translateX(-80px))，并且向上移90px(translateY(-90px))，同时在X轴扭转-
20deg(skewX(-20deg))。这样整个效果，看上去更像⼀个会发光的球体。
8号球
打斯诺克的同学，都知道最后要打⼀个8号球。下⾯我们额外增加⼀步，创建⼀个8号球。
我们需要额外添加⼀个元素，⽤来制作这个8的效果：
.ball .eight {
width: 110px;
height: 110px;
margin: 30%;
background: white;
border-radius: 50%;
transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
position: absolute;
}
.ball .eight:before {
content: "8";
display: block;
position: absolute;
text-align: center;
height: 80px;
width: 100px;
left: 50px;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。