过渡
为元素从一种样式转变为另一种样式时添加效果，如渐显、渐弱、动画快慢等
div:hover{ /*鼠标移入事件*/ background-color:blue;/*指定动画过渡的CSS属性*/ -webkit-transition-property:background-color;/*指定产生过渡效果的CSS属性为ackground-color*/ -moz-transition-property:background-color; -webkit-transition-duration:5s;/*定义过渡效果需要花费5秒的时间*/ -moz-transition-duration:5s; -webkit-transition-timing-function:ease-in-out;/*规定过渡效果以慢速开始和结束*/ -moz-transition-timing-function:ease-in-out; -wedkit-transition-delay:2s;/*指定过渡的动作会延迟2秒触发*/ -moz--transition-delay:2s;}transition-property属性
transition-property属性用于指定应用过渡效果的CSS属性的名称，其过渡效果通常在用户将指针移动到元素上时发生。当指定的CSS属性改变时，过渡效果才开始
基本语法格式：transition-property: none | all | property
属性值 描述 none 没有属性会获得过渡效果 all 所有属性都会获得过渡效果 property 定义应用过渡效果的CSS属性名称，多个名称之间以逗号分隔 transition-timing-function属性
transition-timing-function属性规定过渡效果的速度曲线，默认值为“ease”
基本语法格式：transition-timing-function:linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);
| 属性值 | 描述 |
| linear | 指定以相同速度开始至结束的过渡效果，等同于cubic-bezier(0,0,1,1) |
| ease | 指定以慢速开始，然后加快，最后慢慢结束的过渡效果，等同于cubic-bezier(0.25,0。1,0.25,1) |
| ease-in | 指定以慢速开始，然后逐渐加快(淡入效果)的过渡效果，等同于cubic-bezier(0.42,0,1,1) |
| ease-out | 指定以慢速结束(淡出效果)的过渡效果，等同于cubic-bezier(0,0,0.58,1) |
| ease-in-out | 指定以慢速开始和结束的过渡效果，等同于cubic-bezier(0.42,0,0.58,1) |
| cube-bezier(n,n,n,n) | 定义用于加速或者减速的贝塞尔曲线的形状，它们的值在0~1 |
transition-delay属性
transition-delay属性规定过渡效果何时开始，默认值为0，常用单位是秒(s)或者毫秒(ms)，可以是正整数，0，负整数。
当设置为负数时，过渡动作会从该时间点开始，之前的动作被截断。设置为正整数时，过渡动作会延迟触发基本语法格式：transition-delay: time
transition属性
transition属性是一个复合属性，用于在一个属性中设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性。
基本语法格式：transition: property duration timing-function delay
例如：transition:border-radius 5s ease-in-out 2s;
设置多个过渡效果时，它们的各个参数必须按照顺序进行定义，不能颠倒
变形
通过transform属性可以实现变形效果，如移动、倾斜、缩放以及翻转元素等
认识transform
CSS3的变形(transform)属性可以让元素在一个坐标系统中变形，这个属性包含一系列变形函数，可以进行元素的移动、旋转和缩放。
基本语法：transform: none | transform-functions;
treansform属性的默认值为none，适用于内联元素和块元素，表示不进行变形。transform-function用于设置变形函数，可以是一个或多个变形函数列表
transform-function函数包括matrix()、translate()、scale()、rotate()和skew()等。
matrix()：定义矩形变换，即基于X和Y坐标重新定位元素的位置
translate()：移动元素对象，即基于X和Y坐标重新定位元素
scale()：缩放元素对象，可以使任意元素对象尺寸发生变化，取值包括正数、负数、和小数
rotate()：旋转元素对象，取值为一个度数值
skew()：倾斜元素对象，取值为一个度数值
2D转换
如果一个元素需要设置多种变形效果，可以使用空格把多个变形属性值隔开
平移
基本语法：transform:translate(x-value,y-value);
例如：transform:translate(100px,30px);
使用translate()方法移动元素时，基点默认为元素中心点，x-value指元素在水平方向上移动的距离，y-value指元素在垂直方向上移动的距离，如果省略了第二个参数，则默认值为0，当值为负数则反方向移动
缩放
基本语法：transform:scale(x-axis,y-axis);
例如：transform:scale(2,3);
x-axis(宽度缩放比例)和y-axis(高度缩放比例)可以是正数、负数和小数，正数值表示基于指定的宽度和高度放大元素，负数不会缩小元素，而是翻转元素(如文字被反转)，然后再缩放元素，如果第二个参数省略，第二个参数默认等于等于第一个参数
倾斜
基本语法：transform:skew(x-angle,y-angle);
例如：transform:skew(30deg,10deg);
该函数包含两个参数值，分别用于定义相对于X轴进行倾斜和相对于Y轴进行倾斜的角度，如果省略第二个参数，则取默认值0
旋转
基本语法：transform:rotate(angle);
例如：transform:rotate(30deg);
参数angle表示旋转的角度值，如果角度为正数值，则按照顺时针进行旋转，否则按照逆时针旋转
更改变换的中心点
通过transform属性可以实现变形效果，如平移、倾斜、缩放以及旋转效果，这些变形操作都是以元素的中心点为基准进行的，如果需要改变这个中心点，可以使用transform-origin属性
基本语法：transform-origin:x-axis y-axis z-axis;
transform-origin属性包含三个参数，其默认值分别为50% 50% 0
参数 描述 x-axis 定义视图被置于X轴的何处，可能的值有：left、center、right、
length、%y-axis 定义视图被置于X轴的何处，可能的值有：left、center、right、length、% z-axis 定义视图被置于Z轴的何处，可能的值有：length
3D转换
rotateX()方法
基本语法：transform:rotateX(a);
例如：transform:rotateX(45deg);
参数a用于定义旋转的角度值，单位为deg(度),其值可以是正数也可以是负数，如果值为正，元素将围绕X轴顺时针旋转，反之，如果值为负，元素围绕X轴逆时针旋转
rotateY()方法
基本语法：transform:rotateY(a);
例如：transform:rotateY(45deg);
参数a用于定义旋转的角度值，单位为deg(度),其值可以是正数也可以是负数，如果值为正，元素将围绕Y轴顺时针旋转，反之，如果值为负，元素围绕Y轴逆时针旋转
rotateZ()方法
rotateZ()函数和rotateX()函数、rotateY函数功能一样，区别在于rotateZ()函数用于指定一个元素围绕Z轴旋转。
如果仅从视觉角度上看，rotateZ()函数让元素顺时针或逆时针旋转，与rotate()效果等同，但它不是在2D平面上的旋转
rotate3D()方法
在三维空间里，除了rotateX()、rotateY()和rotateZ()函数可以让元素在三维空间旋转之外，还有一个rotate3Dd()函数
在3D空间，三个维度也就是三个坐标，即长、宽、高。轴的旋转是围绕一个[x,y,z]向量并经过元素原点
基本语法：transform:rotate3d(x,y,z,angle);
x: 代表横向坐标位移向量的长度
y: 代表纵向坐标位移向量的长度
z: 代表Z轴位移向量的长度。此值不能是一个百分比值，否则将会视为无效值
angle: 角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正，元素顺时针旋转，反之元素逆时针旋转
动画
@keyframes
@keyframes animationname{ keyframes-selector{css-styles;} }-
animationname: 表示当前动画的名称，它将作为引用时的唯一标识，因此不能为空
keyframes-selector: 关键帧选择器，即指定当前关键帧要应用到整个动画过程中的位置，值可以是一个百分比、from或者to。其中，from和0%效果相同表示动画的开始，to和100%效果相同表示动画的结束
@keyframes 'appear'{ 0%{opacity:0;} /*动画开始时的状态，完全透明。等同于 from{opacity:0;}*/ 100%{opacity:1;}/*动画结束时的状态，完全不透明。等同于 to{opacity:1;}*/}@keyframes 'appeardisappear'{ from,to{opacity:0;}/*动画开始和结束时的状态，完全透明*/ 20%,80%{opacity:1;}/*动画的中间状态，完全不透明*/}div{ animation-name:appear;/*定义动画名称*/ animation-duration:5s;/*定义动画时间*/ animation-timing-function:linear;/*定义动画速度曲线*/}animation-name属性
animation-duration属性
animation-timing-function属性
| 属性值 | 描述 |
| linear | 动画从头到尾的速度是相同的 |
| ease | 默认，动画以低速开始，然后加快，在结束前变慢 |
| ease-in | 动画以低速开始 |
| ease-out | 动画以低速结束 |
| ease-in-out | 动画以低速开始和结束 |
| cubic-bezier(n,n,n,n) | 在cubic-bezier函数中自己的值。可能的值是从0到1的数值 |
animation-delay属性
animation-iteration-count属性
animation-direction属性
animation属性
filter(滤镜)属性
模糊实例-->图片使用高斯模糊效果：img {-webkit-filter: blur(5px); /* Chrome, Safari, Opera */filter: blur(5px);}Brightness 函数实例-->使图片变亮:img {-webkit-filter: brightness(200%); /* Chrome, Safari, Opera */filter: brightness(200%);}Contrast 函数实例-->调整图像的对比度:img { -webkit-filter: contrast(200%); /* Chrome, Safari, Opera */filter: contrast(200%);}drop-shadow 函数实例-->给图像设置一个阴影效果:img { -webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */filter: drop-shadow(8px 8px 10px red);Grayscale 函数实例-->将图像转换为灰度图像:img { -webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */ filter: grayscale(50%);}hue-rotate() 函数实例-->给图像应用色相旋转:img { -webkit-filter: hue-rotate(90deg); /* Chrome, Safari, Opera */ filter: hue-rotate(90deg);}Invert 函数实例-->反转输入图像:img { -webkit-filter: invert(100%); /* Chrome, Safari, Opera */ filter: invert(100%);}Opacity 函数实例-->转化图像的透明程度:img { -webkit-filter: opacity(30%); /* Chrome, Safari, Opera */ filter: opacity(30%);}Saturate 函数实例-->转换图像饱和度:img { -webkit-filter: saturate(800%); /* Chrome, Safari, Opera */filter: saturate(800%);}Sepia 函数实例-->将图像转换为深褐色:img { -webkit-filter: sepia(100%); /* Chrome, Safari, Opera */ filter: sepia(100%);}复合函数-->使用多个滤镜，每个滤镜使用空格分隔。注意: 顺序是非常重要的 (例如使用 grayscale() 后再使用 sepia()将产生一个完整的灰度图片)。img {-webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari, Opera */ filter: contrast(200%) brightness(150%);}感谢观看！(有兴趣的可以关注，后续发布更多优质文章)
扫一扫
4246
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
