css3动画效果，如何设置呢？

html-css022

css3动画效果，如何设置呢？,第1张

要创建 CSS3 动画，你需要了解 @keyframes 规则。

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

css3 2D变形

1、位移：transform：translateX   x轴位移 

transform：translateY  y轴位移

同时写会被覆盖，所以用复合属性写

复合属性：transform：translate（100px，100px）第一个是x轴参数 第二个是y轴参数

起始点：00点，边框的左上角的顶点

transform：translate（100px  0，） x轴距离左边100px

transform：translate（ 0，100px） y轴距离左边100px

2、缩放：transform：scale（2）里面的数字表示倍的意思

transform：scale（1）表示本身，不变

transform：scale（0.5）小于1表示缩小

transform：scale（0）表示缩小到消失

3、倾斜：transform：skew（ax，ay）表示x轴倾斜角度，y轴倾斜角度  单位是度数值deg

transform：skew（60deg，20deg）

x轴会改变宽度，y轴会改变高度

第一个表示x轴，按照逆时针方向进行旋转，宽度变化，高度不变

第二个表示y轴，按照顺时针方向进行旋转，高度变化，宽度不变

4、旋转：rotate（）单位也是deg

只设置一个值表示沿中心点旋转

rotatex 沿x轴转

rotatey沿y轴转

transition: all 2s linear .5s/加在div上

过渡属性

过渡动画函数（( transition-timing-function )

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

linear

规定以相同速度开始至结束的过渡效果

ease

规定慢速开始，然后变快，然后慢速结束的过渡效果（默认值)

ease-in

规定以慢速开始的过渡效果

ease-out

规定以慢速结束的过渡效果

ease-in-out

规定以慢速开始和结束的过渡效果

你要先确定你想要的网页的风格和大体的布局。

比如：风格是蓝色调的；布局是两列布局，顶部是banner，左边导航栏，右边是主体内容，下面是footer。

先把大的框架定下来，然后在大的框架里面，再布小的，然后是更小的。

一下子就布好，都考虑到是不现实的。

可以先在纸上画画，先打后小，先粗后细嘛。