css-3D基础，动画，媒体，鼠标形状

更改变形基点：
/* transform-origin:20px 40px; */

3D旋转
开启3d大舞台 让内部元素保持3D效果
transform-style: preserve-3d;

3d旋转的简写形式 （rotate3d(X,Y,Z,45deg)）
      transform: rotate3d(1,1,1,45deg);

3D平移 z轴平移 整数 往外推 负数往内部推
      transform: translateZ(100px);

景深：
表示的意思内部元素全部有景深效果
      perspective: 300px;

动画
定义动画帧
@keyframes animat {
/* 动画开始帧 */
from{
transform: translate(0,0);
}
/* 动画的结束帧 */
to{
transform: translate(600px,0);
}
}
    
      /* 动画的名字（调用动画的地方需要添加） */
/* animation-name:animat; */
/* 动画的时间 */
/* animation-duration: 2s; */
/* 动画的延迟 */
/* animation-delay:3s; */
/* 动画的速度 ease 慢慢加速然后减速 linear 匀速的 steps 步长*/
/* animation-timing-function:steps(4); */
/* 动画结束以后的保持状态 backwards 回到from forwards 动画结束以后停留在to的地方*/
/* animation-fill-mode:forwards; */
/* 动画的执行次数 infinite:无穷*/
/* animation-iteration-count:infinite; */
/* alternate:from-to-from-to reverse:to-from alternate-reverse:to-from-to-from*/
/* animation-direction:alternate-reverse; */

/* 动画简写 */
/* animation:animat 4s 1s infinite alternate linear; */

      动画的播放状态 paused停止动画 running 运行动画
          animation-play-state:paused;


       /* 定义动画帧第二种方式 */
@keyframes animat {

/* 动画第一帧 */
0% {
transform: translate(0, 0);
}

25% {
transform: translate(600px, 0) rotate(90deg) scale(1.3);
}

50% {
transform: translate(600px, 300px) rotate(180deg) scale(1);
}

75% {
transform: translate(0, 300px) rotate(270deg) scale(1.3);
}

/* 动画的结束帧 */
100% {
transform: translate(0, 0) rotate(360deg) scale(1);
}
}

变量
html{
（起名）--mycolor：blue
          }

调用名字
color: var(--mycolor);

计算函数
width: calc(var(--mywidth) * 2 - 100px);

鼠标形状
    cursor 控制鼠标的形状
pointer：手
crosshair:十字架
        not-allowed;不可点击
     /*cursor:pointer;*/

媒体查询
<!-- 引入对应屏幕的css -->
<link rel="stylesheet" media="screen and (max-width:1000px)" href="./index_max1000.css">
<link rel="stylesheet" media="screen and (min-width:1000px)" href="./index_min1000.css">
<link rel="stylesheet" media="screen and (min-width:1200px)" href="./index_min1200.css">
  /* 媒体查询 screen:用于电脑屏幕，平板电脑，智能手机等。*/
/* 表示的意思 当前css只能再最小屏幕为1200的屏幕内起效 */
/* min-width和max-width是包含在内部的 */
  @media screen and (max-width:1200px){
body{
background-color: red;
}
}

不包含的max-width
@media screen and (min-width:1000px) and (max-width:1199px){
body{
background-color: blue;
}
}
@media screen and (max-width:999px){
body{
background-color: yellow;
}
}

裁剪文字背景
-webkit-background-clip:text;