利用css3中的径向渐变实现如下球体效果

利用中的径向渐变实现如下球体效果

background-image: radial-gradient(circle at 50% 50%,rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 1) 50%);

transform:rotateX(90deg) translateZ(-150px);

background-image: 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);

线性渐变

background-image: linear-gradient(to bottom,rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%);

径向渐变

background-image: radial-gradient(circle at 100px 100px,#5cabff,#000);
background-image: 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%);

CSS3中透视perspective

透视原理： 近大远小 。

浏览器透视：把近大远小的所有图像，透视在屏幕上。

理解浏览器的坐标系：浏览器平面为 Z=0的平面，坐标原点默认为图片的中心，可以通过更改透视原点进行更改。

perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置。

perspectiveOrigin: 个人理解为视点的xy坐标，perspective则是z坐标，三者可以再三维中确定 视点的唯一位置。

目前浏览器都不支持 perspective-origin 属性。

Chrome 和 Safari 支持替代的 -webkit-perspecitve-origin 属性。

perspective: 1200px;
perspective-origin: 50% 50%;

转化（transform）属性让动画的变换多元化

旋转:rotate,缩放:scale,倾斜:skew,移动:translate

transform: rotateX(90deg) translateZ(-150px);

html:

<section class="box">
	<figure class="ball"><span class="shadow"></span></figure>
</section>

css:

<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	body{
		background-color: #ccc;
	}
        html,body{
	        width: 100%;
	        height: 100%;
        }
	body{
		width: 300px;
		margin: 20px auto;
		background-image: linear-gradient(to bottom,rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%);
		background-repeat: no-repeat;
	}
	.box{
		width: 300px;
		height: 300px;
		perspective: 1200px;
		perspective-origin: 50% 50%;
	}
	.ball{
		display: block;
		width: 300px;
		height: 300px;
		background-color: black;
		border-radius: 50%;
		background-image: radial-gradient(circle at 100px 100px,#5cabff,#000);
	}
	.ball .shadow{
		position: absolute;
		width: 100%;
		height: 100%;
		background-image: 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;
	}
</style>

球体的颜色渐变色调整：

.ball{
	display: block;
	width: 300px;
	height: 300px;
	background-color: black;
	border-radius: 50%;
	background-image: radial-gradient(circle at 100px 100px,#0000FD,#000091,#000074);
}

效果如下所示：