分类目录归档:CSS

CSS3 —— animation 之 steps方式过渡

测试连接

参考:

http://www.gbtags.com/gb/share/3213.htm

CSS3 之 3D 特效(三)

两个案例

1、翻页

测试连接

 2、旋转方块

测试连接

 

参考:

http://www.w3schools.com/css/css3_animations.asp

CSS3 之 3D 特效(二)

创建3D场景

1、透视

2014-07-26_122020

 

  • perspective(视距): 物体到显示器的距离。
  • perspective-origin(视点):人从下线前的那个点去看物体。

 

2、使用transform调整元素属性

transform-style:preserve-3d;设定一个3D场景

2014-07-26_123438

Z轴正方形朝我们自己。

  • translate 控制位移
    • translateX
    • translateY
    • translateZ
  • rotate 控制旋转
    • rotateX
    • rotateY
    • rotateZ

 

 

 

测试连接

CSS3 之 3D 特效(一)

CSS3的动画特效,分两种

  • transition(简单)
  • animation(复杂)

transition主要负责一个属性,从一个值平滑过渡到另一个值。animation则能够实现更加强大的效果。

 

transition

transition: <过渡属性> <过渡时间> <过渡方法>

  • 过渡属性可以是:width,height等,可以使用all表示全部。
  • 过渡时间可以是:1s等。
  • 过渡方法可以是:ease,ease-in,ease-out,ease-in-out,linear。

 

测试连接

 

绝对定位布局

测试连接:http://test.iter-cc.com/absolute_layout.html