雨落辰潇-文档站

Appearance

滤镜 Filter ​

css
filter: 滤镜函数(参数);
滤镜函数描述
blur()设置模糊，值是长度，值越大越模糊，百分比无效。
brightness()设置亮度，值是数字或者百分比，0全黑，1无效果，可以比1大，默认1。
saturate()设置饱和度，值是数字或者百分比，0完全不包含，1无效果，可以比1大，默认1。
contrast()设置对比度，值是0~1之间的数字或者百分比，0全灰，1无效果，可以比1大，默认1。
grayscale()设置灰度，使用0~1之间的数字或百分比，值越大灰度越高，0无效果，1灰度最高，默认0
sepia()设置深褐色度，使用0~1之间的数字或百分比，值越大深褐色度越高，0无效果，1灰度最高，默认0
hue-rotate()设置色相旋转，值是0~360deg之间的角度
invert()设置反转，使用0~1之间的数字或百分比，0无效果，1彻底反转，默认0
opacity()设置不透明度，使用0~1之间的数字或百分比，0完全不透明，1彻底透明，默认0
drop-shadow()设置阴影，需要设置偏移位置、模糊值、颜色
url()使用svg设置滤镜
CSS
blur()				模糊
grayscale()			灰度

变换transform ​

变换相关 CSS 属性 ​

CSS 属性名含义值
transform设置变换方法变换方法
transform-origin设置变换原点使用关键字设置。
使用坐标设置
transform-style设置子元素的空间维度flat：子元素在平面空间中，默认值。
preserve-3d：子元素在3D空间中。
perspective设置观察者距离（透视距离、景深）长度
perspective-origin设置观察者位置使用关键字设置。默认在图片的正上方
使用坐标设置。在父元素上设置
backface-visibility设置元素背面是否可见visible：可见，默认值。
hidden：不可见。
注意：行内元素设置变换无效!
CSS
需要设置给变换元素本身：	transform、transform-origin、backface-visibility
需要设置给变换元素的父元素： transform-style、perspective、perspetive-origin
* translate变换位移之后，仍然没有脱离文档流，与相对定位类似，对相邻的元素没有影响
CSS
变换原点如果只设置一个值，另一个值默认为center。

2D 变换的方法 ​

① 位移 translate 方法 ​

translate变换位移之后，仍然没有脱离文档流，与相对定位类似，对相邻的元素没有影响

sh
translateX()		x方向位移
translateY()		y方向位移
translate()			同时设置x方向和y方向位置，需要两个值，如果只有一个值表示只进行x方向位移

位移的变换方法参数的设置规则：

CSS
使用长度作为位移方法的参数
如果使用百分比，x方向参照元素自身宽度，y方向参照元素自身高度

元素居中定位新方法（最优）

css
width: 400px;
padding: 20px;
color: #fff;
background: #900;
/* 设置固定定位 */
position: fixed;
left: 50%;
top: 50%;
/* 设置变换位移，让元素的中心位移到包含块的中心，位移到自身高度的50%,让中心位移到包含块的中心 */
transform: translate(-50%, -50%);

② 缩放 scale 方法 ​

css
scaleX()			x方向缩放
scaleY()			y方向缩放
scale()				同时设置x方向和y方向的缩放，需要两个值，如果只有一个值同时设置x方向和y方向

缩放的变换方法参数的设置规则：

sh
使用数字设置缩放方法的参数

③ 旋转 rotate 方法 ​

CSS
rotate()

变换方法参数的设置规则：

css
使用角度设置旋转
selector {
  // 平滑过渡
  transition: transform 0.5s ease;
  // 变换
  transform:rotate(90deg);
  
}

扭曲

css
skew()： 指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 
skewx()： 指定对象X轴的（水平方向）扭曲 
skewy()： 指定对象Y轴的（垂直方向）扭曲

3D 变换的方法 ​

① 3D 位移 ​

CSS
translateZ()		z轴方向位移
需要设置观察者距离 在父元素上设置，需要开启3D空间
translate3D()		同时设置x方向、y方向、z方向的位移，必须三个值

② 3D 缩放 ​

css
scaleZ()		z轴方向方法
scale3D()       同时设置x方向、y方向、z方向的缩放，必须三个值
sh
受限于平面的屏幕，3D缩放目前没有任何效果

③ 3D 旋转 ​

sh
rotateX()		沿着x轴旋转
rotateY()		沿着y轴旋转
rotateZ()		远着z轴旋转，等同于2d旋转 rotate()
rotate3D()		沿着多个轴一起旋转
css
rotate3D()	前三个参数对应x轴、y轴、z轴是否旋转，取值0和1； 第四个参数设置旋转角度

过渡 transition ​

3.1 过渡相关 CSS 属性 ​

CSS 属性名含义值
transition-duration过渡持续时间时间单位：s、ms
transition-delay过渡延迟时间时间单位：s、ms
transition-property设置哪些样式可以过渡all：能过渡都过渡，默认值
指定属性名，多个使用逗号分隔。
transition-timing-function过渡的运动曲线曲线运动、分步运动
transition过渡复合属性多个值使用空格分隔
一个时间表示持续时间
两个时间，第一个持续，第二个延迟

哪些 CSS 属性可以过渡？

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

单位

css
滤镜的单位需要加px单位，时间单位需要加单位

属性的位置

过渡属性设置的位置

谁的样式发生变化，谁救添加过渡属性transition

css
transition-duration 设置在样式之前的位置

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

sh
在样式变化之前就将过渡相关属性设置好！

transition-timing-function 设置过渡运动曲线：

css
ease			平滑运动，先加速后减速，默认值
linear			匀速运动
ease-in			加速运动
ease-out		减速运动
ease-in-out 	先加速后减速
cubic-bezier() 	贝塞尔曲线
steps()			分步运动，第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每			  	一步的值发生变化的时间点。第二个参数是可选的，默认值为end。 
step-start		steps(1, start)，直接开始变化
step-end		steps(1, end) 1秒后（每一步时间后）开始变化

贝塞尔曲线在线工具：

https://cubic-bezier.com

3.2 触发过渡的条件 ​

sh
1. CSS 伪类选择器， :hover、:active、:focus、:checked 等
2. CSS 媒体查询
3. JavaScript 事件

动画 animation ​

4.1 关键帧 ​

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

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

@keyframes 关键帧名字 {
    from {}
    40%{}
    80%{}
    to {}
}

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

关键帧与元素的关系：

sh
1. 一个元素可以设置多个关键帧
2. 一个关键帧也可以设置给多个元素

4.2 动画相关 CSS 属性 ​

CSS 属性名含义值
animation-name设置关键帧关键字名字，多个使用逗号分隔
animation-duration动画持续时间时间单位：s、ms
animation-delay动画延迟时间时间单位：s、ms
animation-timing-function动画运动曲线曲线运动、分步运动
animation-iteration-count动画执行次数数字，infinite表示无限次
animation-direction动画运动方向normal：默认值。
reverse：反向。
alternate：交替运动。
alternate-reverse：反向交替。
animation-play-state动画运动状态running：正在运动。
paused：暂停运动
animation-fill-mode动画开始前和结束后状态none：默认值。
forwards：结束后处于结束帧样式。
backwards：开始前处于起始帧样式。
both：同时设置forwards和backwards
animation动画复合属性多个值使用空格分隔
一个时间表示持续时间
两个时间，第一个持续，第二个延迟

动画开始前和结束后状态

css
需要设置延迟

使用案例

CSS
// 定义动画
@keyframes donghua {
  from {
    transform: rotate(0deg);
  }
  to {
     transform: rotate(360deg);
  }
}

// 在类上设置动画
.number {
    // 字体缩进
    text-indent: 10px;
    font-weight: 800;
    // 动画 动画名 动画时间 动画速度 动画延时时间 执行次数
    animation: donghua .5s linear 0s 1;
}

Copyright © 2024 雨落辰潇