CSS3的过渡、变形、动画、滤镜等效果
目录
一、过渡效果
二、变形效果
1、平移
2、旋转
3、缩放
4、倾斜
5、改变中心点
三、动画效果
1、创建动画
2、应用动画
四、滤镜效果
1、模糊效果(高斯模糊)
2、图像的亮度
3、图像对比度
4、图像阴影
5、图像灰度化
6、图像反转
7、图像透明度
8、棕褐色效果
9、饱和度
五、CSS3的精灵技术
一、过渡效果
1、transition-property：指定过渡的属性，取值如下：
none：没有属性取得过渡效果
all : 所有属性都有过渡效果
property：具体属性名获得过渡效果
eg：
transition-propeerty：background-color;/*指定背景颜色的过渡效果*/ 2、transition-duration：过渡效果所花费的时间，默认值为0
秒：单位是s 毫秒：单位是ms
3、transition-timing-function：过渡的速度曲线，取值如下：
linear：以相同的速度从开始到结束。等同于cubic-bezier(0,0,1,1)
ease：默认值。由慢到快,然后再到慢的效果
ease-in：由慢开始，逐渐加快.即淡入效果
ease-out：由慢结束.即淡出效果
ease-in-out：淡入、淡出效果
cubic-bezier(n,n,n,n)：由函数实现
二、变形效果
CSS3中的变形效果针对的是页面的坐标系统。
1、平移
平移的本质是重新定义元素的坐标
(1)transform: translate(x-value,y-value); 表示x轴、y轴同时平移
注：在使用此格式表示平移时，若只写了一个值，则默认在X轴上移动的距离，Y轴默认为0。
盒子1没有平移
盒子2平移
(2)transform: translateX( ); 表示x轴的平移。等价于transform: translate( );
(3)transform: translateY( ); 表示Y轴平移。
盒子1没有平移
盒子2平移
2、旋转
transform:rotate(angle);参数angle表示旋转的角度值。正数表示顺时针旋转，负数表示逆时针旋转
3、缩放
缩放的本质是改变元素的大小。(改变元素宽度和高度的缩放比例)
(1)transform:scale(x-axis,y-axis);
参数表示宽度和高度的缩放比例,可以是正数、负数和小数。若是负数，则先让元素反转，然后进行缩放。注：运用此格式表示缩放时，若取值省略第二个参数，则表示第二个参数值和第一个参数值相同
盒子1没有缩放
盒子2有缩放
(2)transform: scaleX(2);只缩放宽度
(3)transform: scaleY(2);只缩放高度
#div2{
margin: 100px;
transform: scaleX(2); /*仅缩放它的宽度*/
transform: scaleY(3); /*仅缩放它的高度*/
}4、倾斜
倾斜的本质是改变元素倾斜的角度。
(1)transform:skew(x-angle,y-angle);
两个参数分别表示x轴和y轴的倾斜角度。角度的单位是deg。注：若用此格式表示元素倾斜，仅有一值表示X轴方向上的倾斜，Y轴则默认值为0。
我是原来的元素
我是倾斜后的元素
(2)transform:skewX(x-angle);沿x轴倾斜
(3)transform:skewY(y-angle);沿y轴倾斜
#div2{
margin: 100px;
transform: skewX(45deg);/*X轴方向顺时针旋转45°*/
transform: skewY(45deg);/*Y轴方向顺时针旋转45°*/
}
5、改变中心点
元素变形的基准点,若要改变这个基准点，通过以下属性实现
transform-origin: x-axis y-axis z-axis; 注：三个参数的默认值为50% 50% 0
x-axis的取值: left center right 数值 百分比
y-axis的取值: top center bottom 数值 百分比
z-axis的取值: 数值
三、动画效果
CSS的动画效果通过animation实现。具体步骤分为2步。
1、创建动画
格式为：
@keyframes 动画名称{
keyframes-selector: {
CSS样式
}
}keyframes-selector：关键帧选择器。可以是百分比、from、to，表示在指定关键帧时动画的位置。from和0%等价，表示动画开始的关键帧；to和100%等价,表示动画结束的关键帧
2、应用动画
格式为： animation: 动画名称 动画方式 循环播放 完成时间;
注：这是复合型格式。一般建议分开定义。
| animation-name | 动画名称 |
| animation-timing-function | 动画方式(动画完成的速度曲线) |
| animation-delay | 执行动画效果之前延迟的时间(规定动画什么时候开始) |
| animation-iteration-coun | 动画的播放次数(参数可以是数字和infinite) |
| animation-duration | 动画完成所需要的时间 |
| animation-direction | 动画播放的方向 |
/*滚蛋的动画效果*/
CSS动画效果例题应用视频——滚蛋
四、滤镜效果
1、模糊效果(高斯模糊)
blur(value); 参数value表示模糊半径，值越大图像越模糊
eg：以下三图分别是原图、模糊值为2、模糊值为5
2、图像的亮度
brightness(value);参数表示图像的亮度。可以是百分比，也可以是正数值。0%表示全黑图像,100%和1表示原图
eg：以下三图分别是原图、亮度为30%、亮度为50%
3、图像对比度
contrast(value);参数表示图像的对比度。可以是百分比，也可以是正数值。图像与背景的色彩对比。为0时图像全灰，为100%图像色彩鲜明。
eg：以下三图分别是原图、对比度为60%、对比度为30%
4、图像阴影
drop-shadow(x,y,r,c);类似于box-shadow属性。参数x和y表示阴影在水平和垂直方向的偏移量。参数r表示阴影半径,参数c表示阴影颜色
eg：以下两图分别是无阴影、有阴影
5、图像灰度化
grayscale(value);参数可以是百分比和正数。100%表示全部灰度,0%表示不变
eg：以下三图分别是原图、灰度化为50%、灰度化为80%
6、图像反转
invert(value); 参数是百分比或正数。这里指色彩的反转。100%和1表示完全反转,0%表示不变。
eg：以下三图分别是原图、反转值为40%、反转值为80%
7、图像透明度
opacity(value);参数是百分比或正数。100%和1表示不变,0%表示完全透明
eg：以下三图分别是原图、透明度50%、透明度10%
8、棕褐色效果
sepia(value);参数是百分比或正数。100%和表示深褐色。0%表示不变
eg：以下三图分别是原图、棕褐色值为40%、棕褐色值为80%
9、饱和度
saturate(value); 0%表示不饱和，数值越大色彩越鲜艳
eg：以下三图分别是原图、饱和度为50%、饱和度为10%
五、CSS3的精灵技术
网页的图片处理技术。是前端优化技术的一种方式。是将多个零星图片放在一张大图上可以减少请求服务器的次数,降低网络延迟,提高页面加载速度；在使用时通过定位方式来访问大图中的零星图片
格式为：
.bg_sprite{ background-image:url(/整图地址); background-repeat:no-repeat }
#ico1 { width:容器宽度;height:容器高度;background-position:X坐标 Y坐标 }