/*网格背景*/
.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%），就是对象的中心位置，元素的坐标原点为对象的左上角；
