css 2D 转换

2020年6月14日 作者 张舫

转换(transform)是css3中具有颠覆性的特征之一,可以实现元素的位移,旋转,缩放等效果

  • translate:移动
  • rotate:旋转
  • scale:缩放

特性重点(translate)

  • 定义2D转换中的移动,沿着X和Y轴移动元素
  • translate最大的优点:不会影响到其他元素的位置
  • translate中的百分比单位,是相对于自身元素的widht 和height做百分比, 如widht 为100px  translateX为50% X轴移动距离为50px height为200px translateY为50%Y轴移动距离为100px
  • 对行内标签没有效果

特性重点 (rotate)

  • rotate里面写度数,单位是deg
  • 角度为正,顺时针,角度为负,逆时针
  • 默认旋转中心是元素的中心点

特性重点(transform-origin)

  • 注意后面的参数 x 和 y是空格隔开
  • xy默认转换中心点是元素的中心点(50% 50%)
  • 还可以给xy设置为px 或者方位名词 (top  bottom  left  right  center)

特性重点(scale)

  • 单一数值单一的数值即指定了一个缩放系数,同时作用于X轴和Y轴让该元素进行缩放,相当于指定了单个值的scale()(2D缩放)函数。
  • 两个长度/百分比值两个数值即分别指定了2D比例的X轴和Y轴的缩放系数,相当于指定了两个值的scale()(2D缩放)函数。
  • 三个长度/百分比值三个数值即分别指定了3D比例的X轴、Y轴和Z轴的缩放系数. 相当于一个scale3d()函数。

2D转换综合写法

  • 同时使用多个转换,其格式为 transform: translate() rotate() scale();
  • 其顺序会影响转换的效果.(先旋转会改变坐标的方向)
  • 当我们同时有位移和其他属性的时候,记得要将位移放到最前面

 

动画

特性

  • 0%是动画的开始,100%是动画的完成.这样的规定就是动画序列
  • 在@keyframes中规定某项css样式,就能创建由当前样式逐渐改为新样式的动画效果
  • 动画是使元素从一种样式逐渐变化为另一种样式的效果,您可以改变任意多的样式任意多的次数
  • 请使用百分比来规定变化发生的时间,或者用关键词 from 和 to ,等同于 0%100%

动画的基本使用

动画常用属性

简写

速度曲线属性细节

 

案例1利用translate让div居中

案例2,表单下拉小三角形

案例三鼠标悬停图片放大

案例4分页小案例

案例5动画奔跑吧div

案例热力图波纹小动画

打字机效果

案例奔跑的大熊