CSS3网页动画

CSS3网页动画

概要:CSS3变形是一些效果的集合

      如:平移、旋转、缩放、倾斜效果

每个效果都可以称为变形(transform)他们可以分别操控元素发生平移、旋转、缩放、倾斜等变化。

网页中能够实现的动画:动态图、flashJavaScript

1.transform:[transform-function];

  1>translate();平移函数

  translate(tx,ty);XY轴的偏移量;

  translateX(tx)X轴的偏移量

  translateY(ty);Y轴的偏移量

  2>scale(sx,sy);XY轴缩放倍数

  scaleX(sx);X轴缩放倍数

  scaleY(sy);Y轴缩放倍数

egtransform:scale(1.5,1.5);

3>skew(ax,yx);XY轴倾斜度

    skew(ax);X轴倾斜度

    skew(yx);Y轴倾斜度

  egtransform:skew(20deg,30deg);

4>rotate(a);单位deg;a取正元素相对原来中心顺时针旋转,只旋转不变形。

 

2.transition过度

  注:使用transition实现过渡动画的使用步骤:

      在默认样式中声明元素的初始状态样式。

      声明过渡元素最终状态样式,如悬浮状态。

      在默认样式中通过添加过渡函数,添加一些不同的样式。

  呈现的是一种过渡,是一种动画转换的过程,如渐现、渐弱、动画快慢等

   CSS3transition的过渡功能更像是一种“黄油”通过一些CSS的简单动作触发样式平滑过渡。

  transition:[transition-property  transition-duration  transition-timing-function  transition-delay]

动态模拟  周期时间  过度函数  延迟时间

    定义转换动画的CSS属性名称

   1>transition-property:; IDEM:指定css属性(widthheightbackground-color属性等)

       all指定所有的元素支持transition-property属性的样式。

     egtransition-property:width:30px;

   2>transition-duration: 单位s ();过渡所需时间。

     eg :transition-duration:2s;

   3>transition-timing-function:;过度动画函数。

     指定浏览器的过渡速度,以及过渡期间的操作进展情况 ,通过给过渡添加一个函数来指定动画的快慢方式。

       ease;速度由快到慢(默认值)

       linear;速度恒速(均匀速度)

       ease-in;速度越来越快(渐显效果)

       ease-out;速度越来越慢(渐隐效果)

       ease-in-out;速度先加速再减速(渐显渐隐效果)

3.伪类触发

  hover

  active

  focus

  checked

媒体查询:通过@media属性判断设备的尺寸,方向等

JavaScript触发:用JavaScript脚本触发

4.设置关键帧

  语法:

  

 1 @keyframes IDENT{   /*第一种写法*/
 2   from{/*CSS样式*/}
 3   percentage{/*CSS样式*/}
 4   to{/*CSS样式*/}      
 5 }
 6 7 @keyframes spread{  /*第二种写法*/
 8   0%{width:0;}
 9   33%{width:23px;}
10   66%{width:46px;}
11   100%{widht:69px;}
12 }

 

 

 

posted @ 2017-09-21 22:57  CosmosRay  阅读(179)  评论(0编辑  收藏  举报