CSS3制作网页动画

Posted 2021-04-09 程导2018

CSS3（Cascading Style Sheet）全称层叠样式表，它是用来进行网页风格设计

css3是W3C在2010年推出的版本，在CSS2.1的基础上添加了以下新技术：多背景，圆角，阴影，动画等高级属性。

下面介绍动画的三个常用属性；

2D变形（transfrom）   过渡(transition)     动画(animation)

(虽然动画得到了众多游览器的支持，但是实际使用的时候需要添加游览器各自的私有属性(前缀))以下分别为2D变形，过渡和动画的游览器兼容性。

游览器        前缀名            中文名                 

IE                 -ms-              IE游览器                  

Firefox        -moz-             火狐浏览器

Chrome       -webkit-          谷歌游览器

Opera           -o-                 欧朋游览器

Safari           -webkit-         OS苹果游览器

<!--其实也可以不用看这些，只要保证你的游览器是最新的版本就行了-->

                                    一  2D变形

css3变形通过teansfrom实现，它可以用作块元素和行内元素上，该属性可以旋转，缩放，移动，倾斜四种。

语法如下：

transfrom:[transfrom-function]*; //设置变形函数，可以一个也可以多个，中间以空格分开，常用的如下：

translate();      平移函数，基于X，Y坐标重新定位元素的位置。

scale();           缩放函数，可以使任意元素对象尺寸发生变化。

rotate();          旋转函数，取值是一个度数值,如  rotate(30deg) 顺时针旋转30度

skew();           倾斜函数，取值是一个度数值

例如：

transfrom:translate(4px,8px);

-webkit-transfrom:scale(1.5);

-o-transfrom:rotate(90deg);

-moz-transfrom:skew(40de);

以上我分别利用了为使用前缀的移动，添加了-webkit-前缀的缩放1.5倍，添加了-o-的倾斜，添加了-moz-前缀的旋转(除去缩放，其他属性都可以有两个值，如果你只写了一个，默认两个都为第一个的值)

同样可以这样写：

语法：transfrom :translate() scale() rotate() skew();

实例：transfrom:translate(100px,0) scale(1.2) rotate(360deg);

<!--为了网页的可兼容性，建议大家每个动画效果都加上每个游览器的前缀-->

                                    二    过渡

css3的过渡是通过 transition 实现的，过渡其实就是动画的一种转换过程，如：从左边到右边，颜色的变换等等(transition)也是一种复合属性。

语法：transition:[transition-property transition-duration transition-timing-function transition-delay]*

1.transition-property:     指定过渡或动态模式的css属性

2.transition-duration:     指定完成过渡所需要的时间 如  2s

3.transition-timing-function:     指定过渡动画函数

3.1.ease:速度由块到慢，逐渐变慢（默认值）

3.2.linear:速度恒速（均速运动）

3.3.ease-in:越来越快（渐显效果）

3.4.ease-out:越来越慢（渐隐效果）

3.5.ease-in-out:先加速再减速（渐显渐隐效果）

4.transition-delay:        指定过渡开始出现的延迟时间

(实际使用和2D变形差不多，如果的复合使用，注意它的顺序)

过渡的触发机制

伪类触发：hover,: active,:focus,:checked等；

媒体查询：可以通过@media属性判断设备的尺寸，方向等。

javaScript触发：用javaScript脚本触发；

                                    三    动画

动画（animation）制作动画的步骤：

(1).通过关键帧(@keyframes)来声明一个动画

(2).找到要设置的动画的元素，并且调用关键帧声明的动画

1.设置关键帧，语法：

@keyframes ident{

    from{/*css写样式*/}

    percentage{/*css写样式*/}

    to{/*css写样式*/}

}

ident是一个动画的名称，可任意定义

在声明了关键帧后并没有什么效果，

2.调用关键帧    语法

animation:animation-name animation-duration animation-timing-functionanimat  ion-delayanimation-iteration-count animation-direction animation-plat-state animation-on-fill-mode;

大家看语法可能很不舒服，不要着急，给大家准备好了速记公式

animation：动画名称 动画播放时间 动画播放方式 开始播放时间 动画播放次数 动画播放方向 动画播放状态 动画时间外属性；

(1).animation-name:是由@keyframes创建的动画名称

(3).animation-iteration-count:动画播放次数，默认为1，infinite表示不限播放