04、CSS3-过渡和2D变换

作者: EndEvent | 来源:发表于2017-06-08 07:37 被阅读91次

一、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;
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);
skewX
skewY
  • scale() 缩放函数 取值 正数、负数和小数
  - scaleX()
  - scaleY()

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

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

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

相关文章

  • 04、CSS3-过渡和2D变换

    一、transition过渡 transition-property: 要运动的样式(all || [attr] ...

  • 04、CSS3-过渡和2D变换

    一、transition过渡 transition-property: 要运动的样式(all || [attr] ...

  • CSS3学习

    盒模型响应式布局 box-sizing:border-box; 新的UI方案课件 过渡和2D变换 3D变换笔记

  • 好用的css3特性-过渡和2D变换

    css3中有很多非常好用的特性,今天来总结一下与动画相关,包括过渡、2D变换。 首先来介绍一下过渡,过渡是在进行变...

  • 2019-06-11

    CSS3 2d变换 3d变换 css3 2d变换 111111 222222

  • --- > css3- 过渡和动画

    transition(过渡) 在CSS3引入transition之前css没有时间轴,所有的状态变化都是瞬间完成 ...

  • transform变换

    transform变换 1. 变换属性 transform 变换分为2D变换和3D变换,描述的是一种变化之后的结果...

  • 3D数学基础及图形开发(六)矩阵的线性变换-镜像和切变

    线性变换-镜像 2D镜像,基于x轴进行镜像变换。(以轴为镜子)(x轴不变,y取反) 镜像矩阵,2D和3D公式(针对...

  • CSS3动画

    CSS3之2D/3D动画 2D的变换3D的变换动画 2D动画的变换 基本说明 注意:一般要写不同浏览器的适配 移动...

  • CSS3-过渡效果

    过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScr...

网友评论

    本文标题:04、CSS3-过渡和2D变换

    本文链接:https://www.haomeiwen.com/subject/xmsxfxtx.html