细品css3

background

css1：
background: background-color url(#) repeat attachment position;
cc3新增:

• background-size :定义背景图片位置，两个值：水平和垂直偏移量
  background-size : x y;

• background-clip ：指定背景绘制区域。共有 3 种情况：
  （1） border-box 背景被裁剪到边框盒
  （2） padding-box 背景被裁剪刀内边距框
  （3） content-box 背景被裁剪到内容框

• background-origin ：设置元素背景图片的原始起始位置
  （1）border-box
  （2）padding-box
  （3）content-box
  background-origin ：border-box || padding-box || content-box；

• background-image: 指定一个或多个图片 ，或指定线性渐变或径向渐变
  (1)指定图片 ： background-image: url() , url(); //注意第一张图是放在最上面。
  (2)渐变 :
  线性渐变:
  background-image: linear-gradient(方向 , color1, color2, color3…)
  background-image: linear-gradient(角度 , color1, color2, color3…)

例子 ： background-image: linear-gradient(to bottom right, red , yellow);

注意：1.指定角度渐变时，要注意旋转方向。 2.在指定color时，也可指定一个百分比数，指渐变从哪开始。3.重复渐变也有。

径向渐变 ：
从起点到终点颜色从内到外进行圆形渐变(从中间向外拉)
background: radial-gradient(center, shape size, start-color, …, last-color);(默认颜色结点均匀分布)

text

文本阴影(text-shadow)
该属性用于给文字设置阴影效果,一共有 4 个值。第一个值为水平偏移量,第二
个值为竖直偏移量,第三个值为模糊距离,第四个值为颜色。

换行
word-break 属性规定自动换行的处理方法。共有 3 个值:normal break-all keep-all
新文本属性
1、text-align-last 属性规定如何对齐文本的最后一行
2、text-overflow 属性规定当文本溢出包含元素时该如何处理。

transform

（1）平移 ： translate(x,y) 将div平移x,y;
（2）旋转 ： rotate(angle) 将div转转angle个角度
（3）放缩 ： scale(x,y) 将div进行放缩
（4）倾斜 ： skewX(angle) 将div倾斜angle个角度

注意：倾斜、放缩都会有一个轴线，div会根据这根轴线进行倾斜、放缩。

transform 3D;

(1)旋转 ：rotateX(angle) rotateY(angle) rotateZ(angle) rotate3D(x,y,z,angle)
其中 0<x,y,z<1,真实度数 x*angle
注意 ： 3D的转化看起来似乎与2D没什么不同，但它是真实3D转动，就好像一本书从正面翻到侧面，这是真正的3D转动。
(2)平移：比2D多了一个translateZ(z) . translate3d(x,y,z) 不可省略参数。
(3)缩放: 比2D多了一个scaleZ 。

transform-origin
更改转化点的位置(旋转、放缩的中心点)

转化矩阵，emmmm这个等用到在学吧，贼难记住

transform-style：指定嵌套元素是怎样在三维空间中呈现。
transform-style: flat|preserve-3d;

backface-visibility:定义当元素不面向屏幕时是否可见。
backface-visibility: visible|hidden;

perspective 定义 3D 元素距视图的距离，以像素计。即Z轴距离。

transition 过渡

当某个css需要平滑的从一个值过渡到另一个值的时候就可以用上了，这是一个非常强大的动画效果。
transition-property: none || all || 指定要过渡的css名称（如color）;

transition-duration: time ; 指过度所用的时间。

指定以上两个过渡效果就已经成立！额外css：

transition-timing-function : 过渡速度的快慢
（1） linear ; //以线性的速度过渡css
（2） ease ; //平滑过渡
（3） ease-in ;//先慢后快
（4）ease-out; //先快后慢
（5）ease-in-out;//先慢后快，再慢
（6）cubic-bezier(n,n,n,n);//cubic-bezier函数变化

transition-duration: time ; //指定过渡触发之后过多少秒后开始过渡css

transition整合
transition: property duration timing-function delay;

animation 动画

作用:animation 属性是一个简写属性,用于设置六个动画属性

语法:animation: name duration timing-function delay iteration-count direction

说明:

animation-name : “String” ; //规定需要绑定到选择器的 keyframe 名称

animation-duration : time ; //规定完成动画所花费的时间,以秒或毫秒计

animation-timing-function 参数如上的transition-timing-function;
// 规定动画的速度曲线

animation-delay : time; //规定在动画开始之前的延迟

animation-iteration-count : n | infinite; //规定动画应该播放的次数
说明:n 定义动画播放次数的数值,infinite 规定动画应该无限次播放

animation-direction normal|alternate; //规定是否应该轮流反向播放动画
说明:normal 默认值,动画应该正常播放,alternate 动画应该轮流反向播放

注意:请始终规定 animation-duration 属性,否则时长为 0,动画不会播放

@keyframes 属性
作用:通过 @keyframes 规则,创建动画
说明:创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式,在动画过程中,能够
多次改变这套 CSS 样式,以百分比来规定改变发生的时间,或者通过关键词 “from” 和
“to”,等价于 0% 和 100%,0% 是动画的开始时间,100% 是动画的结束时间

例子：

div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite; -moz-animation: mymove 5s infinite;
}
@keyframes mymove {
	0% {
	top: 0px;
	}
	25% {
	top: 200px;
	}
	75% {
	top: 50px
	}
	100% {
	top: 100px;
	}
}

其他动画属性：
animation-play-state 属性
作用:animation-play-state 属性规定动画正在运行还是暂停

语法:animation-play-state: paused | running;

说明:paused 规定动画已暂停,running 规定动画正在播放
注释:可以在 JavaScript 中使用该属性,这样就能在播放过程中暂停动画

animation-fill-mode 属性
作用:animation-fill-mode 属性规定动画在播放之前或之后,其动画效果是否可见

语法:animation-fill-mode : none | forwards | backwards | both;

说明:none 不改变默认行为,forwards 当动画完成后,保持最后一个属性值(在最后一
个关键帧中定义),backwards 在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义),both 向前和向后填充模式都被应用

will-change
作用:提前通知浏览器元素将要做什么动画,让浏览器提前准备合适的优化设置

语法:will-change:auto |

说明:auto 表示没有特别指定哪些属性会变化,浏览器需要自己去猜,然后使用浏览器经常使用的一些常规方法优化

最后建议一下css3都拿张图片或者div来一点一点实践一下，css在做特效方面非常有效。css3综合应用，模拟电池🔋充电
结果：https://codepen.io/Chokcoco/pen/bGNqyra?editors=1100 （转跳有点慢，可以等几秒）