为了账号安全,请及时绑定邮箱和手机立即绑定

04、CSS3-过渡和2D变换

标签:
CSS3

一、transition过渡

  • transition-property: 要运动的样式(all || [attr] || none)

  • transition-duration: 运动时间

  • transition-delay:延迟时间

  • transition-timing-function: 运动形式

  - ease: 逐渐变慢(默认值)
  - linear: 匀速
  - ease-in: 加速
  - ease-out: 减速
  - ease-in-out: 先加速后减速
  - cubic-bezier: 贝塞尔曲线(x1, y1, x2, y2 )
   【http://matthewlein.com/ceaser/】

  transition: all 2s;  // 所有属性,过渡时间2s
  transition: width 2s, height 3s;

webp

http://matthewlein.com/ceaser/

二、过渡事件

  • Webkit

  // 添加事件
  obj.addEventListener('webkitTransitionEnd',function(){},false);  // 删除事件
  obj.removeEventListener('webkitTransitionEnd', fn,false);
  • firefox

  // 添加事件
  obj.addEventListener('transitionend',function(){},false);  // 删除事件
  obj.removeEventListener('transitionend', fn,false);

// 添加事件
function addEvent(obj, fn){
obj.addEventListener('webkitTransitionEnd', fn,false);
obj.addEventListener('transitionend', fn,false);
}
// 删除事件
function removeEvent(obj, fn){
obj.removeEventListener('webkitTransitionEnd', fn,false);
obj.removeEventListener('transitionend', fn,false);
}

三、transform形变(2d)

  • rotate() 旋转函数 取值度数

  - deg 度数
  - transform-origin 旋转的基点  // 以矩形右上角为基点旋转
  transform-origin: right top;  // 以矩形左上角为基点旋转
  transform-origin: 0 0;  // 旋转30度
  transform: rotate(30deg);
  • skew() 倾斜函数 取值度数

  - skewX()
  - skewY()  
  // x轴和y轴方向,斜切30度
  transform: skewX(30deg) skewY(30deg);

webp

skewX


webp

skewY

  • scale() 缩放函数 取值 正数、负数和小数

  - scaleX()
  - scaleY()  // 矩形缩小为0.9
  transform: scale(0.9);
  • translate() 位移函数

  - translateX()
  - translateY()  // 往右平移30px
  transform: translateX(30px)

案例: 钟表
案例: 扇形菜单



作者:EndEvent
链接:https://www.jianshu.com/p/242283b8f510


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消