CSS3-渐变-2d-3d-动画

1.内减模式:

box-sizing:border-box

2.边框圆角:

border-radius:20px

3.线性渐变

background-imgage:linear-gradiendt(to bottom(默 认值.也可自定义角度),red 0%,black 100%)

4.过渡

过渡的属性(颜色)

transition-prooperty:background-color;

持续的时间

transition-duration: 1s;

速度曲线(匀速)

transition-timing-function:linear;

延时时间

transition-delay:2s;

过渡结束事件

transitionend

复合写法

/* 过渡的属性为width 持续3s 匀速 延迟0s */

  transition: width 3s linear 0s;

5.2d

移动

transform:translate(x,y);

旋转

transform:rotate(0deg);

旋转中心

transform-origin:0px 0px;

缩放

transform:scale(1,1)

6.3d

移动

transform:translate3d(x,y,z)

transform:translateX(100px)

transform:translateY(100px)

transform:translateZ(100px)

旋转

transform:rotateX(0deg);

transform:rotateY(0deg);

transform:rotateZ(0deg);

transform:rotate3d(x,y,z);

缩放

transform:scaleX|Y|Z;

transform:scale3d(x,y,z)

开启3d空间

transform-style:preserve-3d

视距

给父元素加perspective:1000px;

动画

1.先定义

@keyframes动画名 { 0%{}100%{} }

2.再调用

动画名:animation-name

持续的时间:animation-duration:1s

速度曲线 :animation-timing-function:linear(匀速)

延时时间:animation-delay:1s

循环次数: animation-iteration-count:finite(无限循环)

运行的方向:animation-direction:alternate(正-反-正)|reverse(反)|alternate-reverse(反-正-反)

播放之外的状态 animation-fill- mode:forwords(结束,停留在100%)|backwords(等待,停留在0%)|both(同时设置)

播放状态:animation-play-state:paused(暂停)|runnimg(播放)