css3动画效果,如何设置呢?

html-css021

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。

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

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

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