CSS3动画

CSS3渐变

CSS3 渐变（gradient）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果，现在通过使用 CSS3 的渐变（gradients）即可实现。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

1、线性渐变

语法： background: linear-gradient(direction, color-stop1, color-stop2, ...);

说明：

direction：默认为to bottom，即从上向下的渐变； stop：颜色的分布位置，默认均匀分布，例如有3个颜色，各个颜色的stop均为33.33%。

 

示例1：to left、top right、to bottom、to top

div { background:linear-gradient(to left, red , blue) }

div { background:linear-gradient(to right, red , blue) }

div { background:linear-gradient(to bottom, red , blue) } /* 浏览器默认值 */

div { background:linear-gradient(to top, red , blue) }

分别产生“从右到左”、“从左到右”、“从上到下”、“从下到上”的“红色–绿色”渐变

示例2：to right bottom、top right top、top left bottom、top left top

div { background: linear-gradient(to right bottom, red , blue); }

div { background: linear-gradient(to right top, red , blue); }

div { background: linear-gradient(to left bottom, red , blue); }

div { background: linear-gradient(to left top, red , blue); }

分别产生到“右下角”、“右上角”、“左下角”、“左上角”的渐变

示例3：使用角度渐变

div { background: linear-gradient(10deg, red, blue) }

角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

但是，请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

2、径向渐变

径向渐变不同于线性渐变，线性渐变是从“一个方向”向“另一个方向”的颜色渐变，而径向渐变是从“一个点”向四周的颜色渐变

语法： background: radial-gradient(center, shape, size, start-color, ..., last-color);

说明：

center：渐变起点的位置，可以为百分比，默认是图形的正中心。

shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。

size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角

 

示例1：多颜色点均匀分布

div { background: radial-gradient(red, green, blue); } 以中心（50% 50%）为起点，到最远角（farthest-corner），从red到green、blue的均匀渐变

div { background: -webkit-radial-gradient(50% 50%, farthest-corner, red, green, blue); } 或 div { background: -webkit-radial-gradient(center, farthest-corner, red, green, blue); }

 

示例2：多颜色节点不均匀分布

div { background: radial-gradient(red 5%, green 15%, blue 60%); }

示例3：设置渐变形状

div { background: radial-gradient(circle, red, yellow, green); }

div { background: radial-gradient(ellipse, red, yellow, green); }

circle：渐变为最大的圆形； ellipse：根据元素形状渐变，元素为正方形是显示效果与circle无异。

 

示例4：不同尺寸的渐变      

size指定了渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角

div { background: radial-gradient(60% 40%, closest-side, blue, green, yellow, black); }

div { background: radial-gradient(60% 40%, farthest-side, blue, green, yellow, black); }

div { background: radial-gradient(60% 40%, closest-corner, blue, green, yellow, black); }

div { background: radial-gradient(60% 40%, farthest-corner, blue, green, yellow, black); }

3、重复渐变

重复性线性渐变

div { background: repeating-linear-gradient(red, yellow 10%, green 20%); }

说明：10%的位置为yellow，20%的位置为green，然后按照这20%向下重复

 

重复性径向渐变

div { background: repeating-radial-gradient(red, yellow 10%, green 20%); }

transform功能的分类

一、实现缩放

     语法：

     transform：scale(缩放倍率); 或者

     transform：scale(水平缩放倍率， 垂直缩放倍率);

     注意：这个放大是不会改变其位置的，就像浮动一样，在其原来的位置上变化的，如果下边有其他模块则会被盖住。

二、实现倾斜

     语法：

     transform：skew(水平方向的倾斜角度); 或者

     transform：skew(水平方向的倾斜角度，垂直方向的倾斜角度);

     倾斜角度为n deg

指定变形的基准点

       在使用transform方法进行文字或图像变形的时候，是以元素的中心点为

基准点进行变形的，使用transform-origin属性，可以改变变形的基准点。

语法：

transform-origin：基准点在水平方向上的位置，在垂直方向上的位置；

三、实现移动

     语法：

     transform：translate(水平方向的移动距离); 或者

     transform：translate(水平方向的移动距离，垂直方向的移动距离);

3D变形可以实现元素在X轴、Y轴、Z轴方向上的旋转、缩放、倾斜以及移动变形处理

一、旋转

       语法：

       transform：rotateX(45deg);

        transform：rotateY(45deg);

        transform：rotateZ(45deg);

        或者：

        transform：rotateX(45deg) rotateY(45deg) rotateZ(45deg);

二、缩放

       语法：

       transform：scaleX(0.5);

        transform：scaleY(1);

        transform：scaleZ(2);

        或者：transform：scaleX(0.5) scaleY(1) scaleZ(2);

三、倾斜

       语法：

       transform：skewX(45deg);

        transform：skewY(45deg);       

     和2D效果类似

四、移动

       语法：

       transform：translateX(50px);

        transform：translateY(100px);

        transform：translateZ(20px);

CSS3中的动画功能

CSS3中的动画分为Animations功能与Transitions功能，这两种功能都可以通过改变CSS中的属性值来产生动画效果

1、Animations功能支持通过关键帧的指定来再页面上产生更复杂的动画效果

2、Transitions功能支持从一个属性值平滑过渡到另一个属性值

Transitions功能

语法：

     transition:property   duration   timing-function   delay;

   property:表示对哪个属性操作

     duration：表示在多久时间内完成属性值的平滑过渡

     timing-function:表示通过什么方法平滑过渡

   delay:表示延迟多长时间开始执行特效

分别对应三个属性：

transition-property、transition-duration、transition-timing-functon、transition-delay

Animation功能的使用方法

我们在使用transition实现动画的时候只能指定要改变的属性的开始值和结束值，然后在这两个值之间进行平滑过渡的方式来实现动画效果，因此不能实现比较复杂的动画效果；而animation通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果

在使用animation功能的时候，通过如下方法来创建关键帧的集合：

@keyframe 关键帧集合名{创建关键帧的代码}

创建关键帧的代码类似如下：

40%{

     本关键帧中的样式代码

}

Animation功能的使用方法

animation-name:指定关键帧集合的名称

animation-duration：指定完成整个动画需要的时间

animation-timing-function:指定实现动画的方法

animation-delay：指定延迟多少秒或多少毫秒后开始执行动画

animation-iteration-count：指定动画的执行次数，可指定为infinite

animation-direction：指定动画执行方向，可指定属性值包括：

     nomal:初始值（动画执行完毕后返回初始状态）

     alternate:交替更改动画的执行方向

     reverse:反方向执行动画

     alternate-reverse:从反方向开始交替更改动画的执行方向

综合书写方式：

     animation：keyframe的名称   动画的执行时长   动画的实现方法   延迟多少秒后开始执行动画   动画的执行次数   动画的执行方向

实现动画的方法animation-timing-function的值

linear：在动画开始时与结束时以同样速度进行改变

ease-in:动画开始时速度很慢，然后速度沿曲线值进行加快

ease-out:动画开始时速度很快，然后速度沿曲线值进行放慢

ease：动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值进行放慢

ease-in-out：动画开始速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值进行放慢

1、transform

     CSS3中的变形处理，实现文字和图像的旋转、缩放、倾斜和移动等

2、transitions

     CSS3中的动画功能，通过一个属性值平滑过渡到另一个属性值来实现

3、animation

     CSS3中的动画功能，通过在样式中创建多个关键帧，在这些关键帧中编写样  式，并且能够在页面上综合运行这些关键帧来实现较为复杂的动画