CSS3 动画

CSS3 动画

1.属性前缀

CSS3还在开发过程中，由于新属性有可能带来未知的问题，各大浏览器厂商对新属性的兼容情况不一，一些属性处于浏览器实验使用过程中，浏览器厂商会在新属性前加上一定的前缀来加以区分。

四类基本前缀：

（1）**-moz- ** ：Gecko内核浏览器 （火狐）

（2）-webkit- ：WebKit内核浏览器 （谷歌、Safari）

（3）-ms- ：Trident内核浏览器 （IE）

（4）-o- ：Presto内核浏览器 （Opera）

实际使用某个实验属性时，标准写法要将所有支持的浏览器前缀都写上去，并且最后将不带前缀的写一遍，以保证不同浏览器的兼容性

/*不透明度属性：取值0.0~1.0，由完全透明到不透明*/
div{ 
    -moz-opacity: ;
    -webkit-opacity: ;
    -ms-opacity: ;
    -o-opacity: ;
    opacity: ;
}
1
2
3
4
5
6
7
8

2.圆角边框(border-radius)

border-radius属性有两个参数，两个参数之间使用 / 分开，每个参数包含4个值。

div{
    border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px;
}
1
2
3

参数解释：第一个参数代表水平方向半径，第二个参数代表垂直方向的半径，每个参数中的四个值分别代表左上角、右上角、右下角、左下角的水平或垂直半径值。

圆角的形成：

（1）从指定角的顶端，向内部引出垂直半径和水平半径。

（2）将水平半径和垂直半径相交于元素内部的一个点（圆心）。

（3）以该点为圆心，执行垂直半径和水平半径画圆或者椭圆。

（4）与边框相较的部分就是圆角部分。

.png)]

参数简写

/*只有一个参数的情况，表示水平半径和垂直半径相同*/
div{
    border-radius: 10px 20px 30px 40px ;
}
/*一个参数两个值的情况，表示左上角与右下角的为第一个半径值，右上角与左下角的为第二个半径值（即对角相同）*/
div{
    border-radius: 10px 20px ;
}
1
2
3
4
5
6
7
8

3.阴影

文字阴影 text-shadow四个值，第一个值代表阴影水平偏移距离，第二个值代表纵向偏移距离，第三个值表示阴影的模糊程度，第四个值是颜色。

div{
    text-shadow: 2px 3px 3px red;
}
div{
    text-shadow: -2px -3px 2px green;
}
/*可以加多个阴影，每个阴影参数使用逗号分开*/
div{
    text-shadow: 2px 3px 2px green,3px 3px 2px yellow，-3px 3px 2px red;
}
1
2
3
4
5
6
7
8
9
10

盒子阴影box-shadow

/*与文字阴影效果类似*/
div{
    box-shadow: 2px 3px 3px red;
}

/*向外延伸10px阴影*/
div{
    box-shadow: 2px 3px 3px 10px red;
}

/*inset 设置内部阴影效果*/
div{
    box-shadow: 2px 3px 3px inset red;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4.渐变

渐变方式：线性渐变和径向渐变

(1)线性渐变background-image: linear-gradient();

/*背景颜色渐变，实际是元素背景图片属性效果，所以是在background-image使用相应的渐变函数*/

.linear{
    width: 300px;
    height: 400px;
    
    /*线性，默认从上到下*/
    background-image: linear-gradient(red,green,blue);
    
    /*使用to改变方向，从下到上*/
    background-image: linear-gradient(to top,red,green,blue);
    
    /*从右到左*/
    background-image: linear-gradient(to left，red,green,blue);
    
    /*使用角度改变方向，从上到下*/
    background-image: linear-gradient(0deg,red,green,blue);
    
    /*使用角度改变方向*/
    background-image: linear-gradient(30deg,red,green,blue);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

(2)径向渐变 background-image: radial-gradient();

/*参数只有颜色时，默认的渐变参考点为中心点（圆心）*/
.radial{
    width: 300px;
    height: 400px;
    /*径向*/
    background-image: radial-gradient(red,green,blue);
}
/*使用at x y可以设置参考点，x ，y取值可以是像素也可以是百分比*/
background-image: radial-gradient(at 10px 10px ,red,green,blue);
background-image: radial-gradient(at 10% 10% ,red,green,blue);
1
2
3
4
5
6
7
8
9
10

5.转换Transform（2D转换）

对元素进行旋转，缩放，移动或倾斜，通过转换CSS变形，可以让元素生成静态视觉效果，也可以结合transition和keyframe产生动画效果。

transform属性的值是使用函数来定义的，函数包括：
translate(),scale(),rotate(),skew()

语法：
div{
    transform:函数名(X轴,y轴);
}
1
2
3
4
5
6
7

(1)translate()水平和垂直方向移动函数，参数可以加负号，表示反方向移动，只有一个参数时，代表水平方向移动

transform: translate(20px);

transform: translate(20px,90px);

transform: translate(-20px,-90px);

(2)rotate(角度deg)，只有一个参数，2d旋转，角度单位是deg

transform: rotate(30deg);

(3)scale(x轴倍数，y轴倍数)，缩放，一个参数时表示xy轴同时缩放

transform: scale(0.5,2);

(4)skew(x轴角度，y轴角度)，绕x轴或y轴旋转，当只有一个角度参数时，表示绕x轴旋转;

(1) transition: all 2s; 属性可以设置转换过程的时间长度

(2)transform属性值可以同时写多个

transform: translate(20px,90px) rotate(30deg) scale(0.5,2) skew(30deg);

6.转换Transform（3D转换）

转换Transform（3D转换）只是对应的函数不同：

translate3d(),scale3d(),rotate3d(),skew3d()

7.过渡属性

transition属性，属性值包括：需要过渡的属性，过渡完成时间，过渡函数，延时执行时间

div:hover{
    transition-property: all /*过渡属性为全部*/
    transition-duration: 2s /*过渡时间为2s*/
    transition-timing-function: linear /*函数为线性过渡函数*/
    transition-delay: 1s /*延迟时间为1s*/
}

div:hover{
    transition-property: background-color /*过渡属性为颜色*/
    transition-duration: 1s /*过渡时间为1s*/
    transition-timing-function: linear /*函数为线性过渡函数*/
    transition-delay: 2s /*延迟时间为2s*/
}
1
2
3
4
5
6
7
8
9
10
11
12
13

8.animation动画

animation属性可以制作类似flash动画，通过关键帧控制动画的每一步，使样式从一种样式逐渐变化为另一种样式，用于实现复杂的动画效果。

首先要使用@keyframes定义动画，定义格式如下：

 @keyframes myname {
     30%{
         background-color: red;
     }
     70%{
         background-color: aqua;
     }
     100%{
         background-color: indigo;
     }
}

div{
    width: 300px;
    height: 400px;
    border: solid black;
    
    animation: myname 5s 3;/*动画效果*/
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

animation属性值说明：