Day13_CSS3课堂笔记

Day13 CSS3 课堂笔记

1 回顾

1. CSS3 盒子模型相关样式
   box-sizing:  content-box / border-box
   box-shadow: 盒子阴影
   opacity: 盒子的不透明度


2. CSS3 新增背景属性
   background-origin：padding-box / border-box / content-box
   background-clip: border-box / padding-box / content-box / text
   background-size： 背景图像尺寸  两个长度、cover、contain
   复合属性： 1. origin和clip的值 2. position/size
   CSS3可以设置多个背景图像

3. CSS3 新增边框属性
   3.1 边框圆角
   	   border-top-left-radius
   	   border-top-right-radius
   	   border-bottom-left-radius
   	   boreer-bottom-right-radius
   	   border-radius
   3.2 外轮廓
   	   outline-style
   	   outline-width
   	   outline-color
   	   outline
   	   outline-offset


4. CSS3 新增文本属性
	text-align-last: start/end/left/right/center/justify
	text-decoration-line: underline/overline/line-throuth/none
	text-decoration-style: solid/dashed/dotted/double/wavy
	text-decoraiton-color
	text-decoration
	white-space: normal / pre / pre-wrap / pre-line / nowrap
	text-overflow: clip / ellipsis
	text-shadow

5. CSS3 渐变
	linear-gradient()
	radial-gradient()
	repeating-linear-gradient()
	repeating-radial-gradient()

6. CSS3 Web 字体
	6.1 @font-face
	6.2 定制字体
	6.3 字体图标
	    阿里图标
	    font-awesome

2 变换 transform

2.1 变换相关 CSS 属性

CSS 属性名	含义	值
transform	设置变换方法	变换方法 多种变换方法，使用空格分隔
transform-origin	设置变换原点	使用关键字或长度表示原点坐标。
transform-style	开启3D空间	flat：子元素在2D空间，默认值。 preserve-3d：子元素在3D空间。
perspective	设置景深（观察者距离）	长度
perspective-origin	设置观察者位置	使用关键字或长度表示原点坐标。
backface-visibility	设置元素背面是否可见	visible：可见，默认值。 hidden：不可见。

1. transform-style、perspective、perspective-origin、backface-visibility 这4个属性只对3D变换有效果
2. transform-style、perspective、perspective-origin 需要设置给进行了3D变换元素的父元素。
3. transform、transform-origin、backface-visibility 需要设置变换的元素。

2.2 2D 变换的方法

① 位移 translate 方法

translateX()		设置水平位移
translateY()		设置垂直位移
translate()			同时设置水平和垂直位移，需要两个值，如果只有一个值只设置水平位移。

1. 需要使用长度指定位移的距离,可以设置负值。
2. 使用百分比设置，水平位置参照元素自身的宽度，垂直位移参照元素自身的高度

② 缩放 scale 方法

scaleX()			设置水平方向缩放
scaleY()			设置垂直方向缩放
scale()				同时设置水平和垂直方向缩放，需要两个值； 如果只有一个值同时设置两个方向缩放。

1. 需要一个纯数字表示缩放的倍数，比1大是放大，比1小是缩放,可以设置负值。
2. 也可以使用百分比， 50% 相当于 0.5

③ 旋转 rotate 方法

rotate()			设置旋转的角度

1. 使用角度设置旋转方法，角度的单位是 deg
2. 使用正值角度，顺时针旋转；使用负值角度，逆时针旋转

2.3 3D 变换的方法

① 3D 位移

translateZ()		沿Z轴位移
translate3D()		同时设置x、y、z轴的位移距离，必须设置3个值否则无效。

② 3D 缩放

scaleZ()			沿Z轴缩放，没有效果。
scale3D()			同时设置沿x轴、y轴、z轴缩放，必须设置3个值否则无效。

③ 3D 旋转

rotateX()			沿x轴旋转
rotateY()			沿y轴旋转
rotateZ()			沿z轴旋转，等同于2D旋转
rotate3D()			同时设置沿多个值旋转，需要设置4个值，前3个都是0或者1，对应x、y、z轴是否旋转，最后一					 值设置角度。  

3 过渡 transition

3.1 过渡相关 CSS 属性

CSS 属性名	含义	值
transition-property	设置哪些属性进行过渡	all：表示所有变化的属性能过渡的都过渡，默认值。 属性列表，使用逗号分隔
transition-duration	设置过渡的持续时间	时间单位是 s（秒） 或者 ms（毫秒）
transition-delay	设置过渡延迟时间	时间单位是 s（秒） 或者 ms（毫秒）
transition-timing-function	设置过渡的运动轨迹	ease：平滑运动，默认值。 linear：线性运动。 ease-in：加速运动。 ease-out：减速运动。 ease-in-out：先加速载减速。 cubic-bezier(n, n, n, n)：使用贝尔赛曲线表示轨迹。 steps(步数, start/end)：分步运动。第二个默认end step-start：相当于 steps(1, start)。 step-end: 相当于 steps(1, end)
transition	过渡的复合属性	多个值，使用空格分隔。 设置一个时间表示duraiton，设置两个时间分别是duration和delay

哪些 CSS 属性可以过渡？

1. 属性值是长度的 CSS 属性，如 width、height、margin、padding、line-height、border-width 等
2. 属性值是颜色的 CSS 属性，如 background-color、color、border-color 等
3. 变换 transform
4. 属性值是纯数字的 CSS 属性，如 opacity、z-index 等

什么时候设置过渡相关的属性？

一定在变化之前，把过渡相关的属性设置好！

贝塞尔曲线在线工具：

https://cubic-bezier.com

3.2 触发过渡的条件

① CSS 的伪类选择器（动态伪类）

:hover
:active
:focus

② JavaScript 的事件

③ 媒体查询 @media

4 动画 animation

4.1 关键帧

@keyframes 关键帧名字 {
    from {
        
    }
    to {
        
    }
}

@keyframes 关键帧名字 {
    0% {
        
    }
    100% {
        
    }
}

@keyframes 关键帧名字 {
    from {
        
    }
    20% {
        
    }
    60% {
        
    }
    to {
        
    }
}

1. 可以把多个关键帧设置到一个元素上。
2. 同一个关键帧也可以设置给多个元素。

4.2 动画相关 CSS 属性

CSS 属性名	含义	值
animation-name	给元素设置关键帧	关键帧的名字。 多个使用逗号分隔。
animation-duration	设置动画持续时间	时间
animation-delay	设置动画延迟时间	时间
animation-timing-function	设置动画运动轨迹	ease：平滑运动，默认值。 linear：线性运动。 ease-in：加速运动。 ease-out：减速运动。 ease-in-out：先加速载减速。 cubic-bezier(n, n, n, n)：使用贝尔赛曲线表示轨迹。 steps(步数, start/end)：分步运动。第二个默认end step-start：相当于 steps(1, start)。 step-end: 相当于 steps(1, end)
animation-iteration-count	设置动画执行次数	数字、infinite（无限次），默认 1 次
animation-direction	设置动画的运动方向	normal：正向运动，默认值。 reverse：反向运行。 alternate：正向交替。 alternate-reverse：反向交替。
animation-play-state	设置动画的运动状态	running：默认值，运动。 paused：暂停。
animation-fill-mode	设置动画开始之前和动画结束之后元素的状态	none：都处于默认样式。 forwards：动画结束之后处在结束帧状态。 backwards：动画开始之前处在第一帧状态。 both：同时满足 forwards和backwards
animation	动画的复合属性	所有子属性的值，没有顺序和数量要求。 设置一个时间表示duraiton，设置两个时间分别是duration和delay