CSS暂且就先学到3D吧,要开始学习JS了

CSS新特性

CSS盒子模型

CSS3中可以通过box-sizing 来指定盒子模型;

  1. box-sizing:content-box 盒子大小为width+padding+border (以前默认)
  2. box-sizing:border-box 盒子大小为width (不会撑大盒子)
其他特性(了解)
CSS3滤镜filter

filter: 函数() ; 例如:filter:blur(5px); blur 模糊处理,数值越大越模糊

CSScalc 函数

calc() 此CSS函数在声明CSS属性值时执行一些计算

width :calc (100% - 80px);

CSS过渡

过渡(transition),CSS过渡动画

transition : 要过渡的属性 花费时间 运动曲线 何时开始;

多个属性,利用逗号进行分割

  1. 属性:想要变化的css属性,宽度高度 背景颜色 内外边距都可以。所有属性过渡all;
  2. 花费时间:单位是秒(必须写单位)
  3. 运动曲线:默认是ease(可以省略)
  4. 何时开始:单位是秒(必须写单位) 可以设置延迟触发时间 默认是0s(可以省略)

CSS3 2D转换

转换(tranform) 是CCS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放

  • 移动:transale
  • 旋转:rolate
  • 缩放:scale
移动

transform : translate(x,y); 或者分开写

transform : translateX(n);

  • 不会影响其他元素的位置
  • 对行内标签没有效果
旋转

transform : rotate(度数)

  • rotate里面是度数,单位是deg
  • 角度为正时顺时针,负逆时针
  • 旋转的中心点是元素的中心点

设置旋转点

1.可以跟方位名词
transform-origin: left bottom; 
2. 默认的是 50%  50%  等价于 center  center
3. 可以是px 像素 
transform-origin: 50px 50px; 
缩放

transform: scale(x,y);

  • x,y逗号分隔
  • 只写一个参数,直接就是倍数
  • scale缩放优势:可以设置转换中心点缩放,默认中心点,而且不影响其他盒子
2D综合变换
我们同时有位移和其他属性,我们需要把位移放到最前面

transform: translate(150px, 50px) rotate(180deg) scale(1.2);

CSS动画

动画(animation) 是CSS中具有颠覆性的特征之一,可通过设置多个节点来精准控制一个或一组动画,常用于实现复杂的动画效果

相比于过渡,动画可以实现更多变化,更多控制,连续自动播放等

动画的基本使用
keyframes

定义动画

@keyframes move {
          /* 开始状态 */
          0% {
              transform: translateX(0px);
          }
          /* 结束状态 */
          100% {
              transform: translateX(1000px);
          }
      }

调用动画

/* 2. 调用动画 */
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
动画属性
div {
    width: 100px;
    height: 100px;
    background-color: pink;
    /* 动画名称 */
    animation-name: move;
    
    /* 持续时间 */
    animation-duration: 2s;
    
    /* 运动曲线 */
    animation-timing-function: ease;
    
    /* 何时开始 */
    animation-delay: 1s;
    
    /* 重复次数  iteration 重复的 conut 次数  infinite  无限 */
    animation-iteration-count: infinite;
    
    /* 是否反方向播放 默认的是 normal  如果想要反方向 就写 alternate */
    animation-direction: alternate;
    
    /* 动画结束后的状态 默认的是 backwards  回到起始状态 我们可以让他停留在结束状态 forwards */
    animation-fill-mode: forwards; 
    
    /* animation: name duration timing-function delay iteration-count direction fill-mode; */
    animation: move 2s linear 0s 1 alternate forwards;
    
    /* 前面2个属性 name  duration 一定要写 */
    animation: move 2s linear  alternate forwards;
    
    /*动画暂停*/
    animation-play-state: paused;
}
速度曲线细节

animation-timing-function: 规定动画的速度曲线,,默认是“ease”

描述
linear 动画线性匀速
ease 默认,低速开始,加快,结束前减速
ease-in 动画以低速开始
ease-out 动画以低速结束
ease-in-out 低速开始和结束
steps() 指定了时间函数中的间隔数量(步长)

3D转换

3D移动
transform: translateX(100px);
transform: translateY(100px);
transform: translateX(100px) translateY(100px) translateZ(100px);
/* 1. translateZ 沿着Z轴移动 */
/* 2. translateZ 后面的单位我们一般跟px */
/* 3. translateZ(100px) 向外移动100px (向我们的眼睛来移动的) */
/* 4. 3D移动有简写的方法 */
transform: translate3d(x,y,z);
/* transform: translate3d(100px, 100px, 100px); */
/* 5. xyz是不能省略的,如果没有就写0 */

透视 perspective

在2D平面产生近大远小视觉立体,二维效果

透视也就是视距,眼睛到屏幕的距离

透视写在被观察的元素的父盒子上面

3D旋转
transform: rotateZ(180deg);

transform: rotate3d(x,y,z,deg);  x,y,z使用01选中,deg代表旋转角度
3D呈现

transform-style : flat | preserve-3d

  • 控制子元素是否开启三维立体环境
  • flat :默认子元素不开启3D;preserve-3d :子元素开启立体空间
  • 代码给父级,影响子盒子