背景表格绘制

	/*网格背景*/
		.gradtable{
			background-position:0px 0px;
			background-size: 15px 15px;
			background-image:
				linear-gradient(#FC0000,#00FF78 1px,transparent 1px,transparent 15px),
				linear-gradient(90deg,#FC0000,#00FF78 1px,transparent 1px,transparent 15px);
			background-repeat:repeat;
		}

说明：

1、 15×15的块 background-size: 15px 15px;

2、 然后才有线条渐变方式绘制一个1条线横向，同时保留15个像素的透明背景（这个非常重要），我们把这个图片定义为 背景1图

linear-gradient(#FC0000,#00FF78 1px,transparent 1px,transparent 15px)

3、然后将横向线旋转90度 ，我们把这个图片定义为 背景2图

linear-gradient(90deg,#FC0000,#00FF78 1px,transparent 1px,transparent 15px)

4、 重复这个背景：background-repeat:repeat;

重点来了

background-image 处理多图的问题来了，多个图片有层级问题，按css要求 背景1图 靠近我们的眼睛，背景2图在背景1图的后面，如果不透明，背景1就把背景2给挡住了，不会出现表格的效果的；

球体绘制

.sphere{
			position: relative;
			width:60px;
			height:60px;
			background-color:#9485FD;
			border-radius:100%;
			margin: 280px auto;
			background-image:radial-gradient(circle,#9485FD,red);
			transform-origin:center -200px;
			transform:rotate(-75deg);
			animation:clock 4s infinite linear;
		}

重点来了

1、radial-gradient(circle,#9485FD,red); 这个的第一个参数，表示径向的类别，其它参数是色彩；

2、难免如何绘制摆动的线和钉子呢？ 如果再弄个div 显然不合适，这个就是在做项目时需要思考，在3或者3个以内的个物体联动时，优先考虑采用伪类：after 和 before

摆动线绘制

/**球的摆线**/
		.sphere:before{
			position: absolute;
		  content: '';
			width:1px;
			height:200px;
			border-left: 3px dashed red;
			top: -200px;
			left:30px;
		}

重点来了

这个地方容易把border-left 这个直接写成border然后发现这个不是一个线条而是一个线框；我也犯了这个错误，然后我修改了；

摆动钉绘制

/**球的摆线固定钉**/
		.sphere:after{
			position: absolute;
			content: '';
			width: 10px;
			height: 10px;
			top: -200px;
			background-color: red;
			border-radius: 100%;
			left: 26px;
			background-image:radial-gradient(circle,red,#9485FD);
		}

这个就很简单了，没啥好说的；

伪类：after 和 before

一定要写上：content: '';

其它和正常的css样式写法一样哦，就相当在原来的div前或者后面加了一个div；

摆动动画

		/**摆动的动画效果**/	
		@keyframes clock{
			0% {transform: rotate(-75deg)}
			50% {transform: rotate(75deg)}
			100% {transform: rotate(-75deg)}
		}

.sphere:{
		  .....
      transform-origin:center -200px;
			transform:rotate(-75deg);
			animation:clock 4s infinite linear;
}

重点来了

1、 确定动画的基地,就是这个小球围绕哪个点运动呢？ 球的正上方 200px位置，为此事件位置（center -200px），这个的Y坐标取负值，默认Y轴屏幕下方为正；

2、元素默认transform-origin的值是什么呢？ 应该是（50% 50%），就是对象的中心位置，元素的坐标原点为对象的左上角；