动画基础

动画

2d转化

transform:matrix(2,0.2,0.2,2,30,40)
 第一个2和第四个2分别代表x,y方向的缩放倍数,正值为放大
 两个0.2分别代表y,x方向倾斜度数的正弦值;
 最后两个数30,40分别代表X,Y方向的移动px值

单独表示,则为:

 transform:translate(100px,1oopx)-----向右 ,下方向移动
 transform:rotate(60deg)-----顺时针方向旋转60度
 transform:scale(2 2)-----x,y方向都扩大两倍
 transform:skew(30deg 4odeg)-----分为拉动左上,右下两个角获得的倾斜(上下边平行x轴)及拉住右上,左下两个角获得的倾斜图形(左右边平行于y轴),角度分别为30度和4度。

3d转换

以某个边为定边进行旋转
transform:rotateX(或Y或Z)(30deg)

3d过渡

transition:(all 2s  ) 
     四个值的表示顺序:
     transition-property 
     transition-duration 
     transition-timing-function 
     transition-delay 

 transition-property 规定应用过渡的 CSS 属性的名称。  
 transition-duration 定义过渡效果花费的时间。默认是 0。 
 transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 
 transition-delay 规定过渡效果何时开始。默认是 0。 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值