AI智能
改变未来

css3和h5部分新属性


1、transform

transform: transform-functions;

值 描述
none 定义不进行转换。
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4×4 矩阵。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换,只是用 X 轴的值。
translateY(y) 定义转换,只是用 Y 轴的值。
translateZ(z) 定义 3D 转换,只是用 Z 轴的值。
scale(x[,y]?) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。
(translate定义移动,scale定义缩放,rotate定义旋转,skew定义倾斜)

2、animation

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

  • animation-name: keyframename|none;
    keyframename 指定要绑定到选择器的关键帧的名称
    none 指定有没有动画(可用于覆盖从级联的动画)
  • animation-duration: time;
    time 指定动画播放完成花费的时间。默认值为 0,意味着没有动画效果。
  • animation-timing-function: value;
    linear 动画从头到尾的速度是相同的。
    ease 默认。动画以低速开始,然后加快,在结束前变慢。
    ease-in 动画以低速开始。
    ease-out 动画以低速结束。
    ease-in-out 动画以低速开始和结束。
    cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。
  • animation-delay: time;
    time 定义动画开始前等待的时间,单位s或ms。默认值为0
  • animation-iteration-count: value;
    n,一个数,定义应该播放多少次动画
    infinite 指定动画应该播放无限次
    (播放完回初始位置)
  • animation-direction: 值;
    normal 默认值。动画按正常播放。
    reverse 动画反向播放。
    alternate 动画在奇数次(1、3、5…)正向播放,在偶数次(2、4、6…)反向播放。
    alternate-reverse 动画在奇数次(1、3、5…)反向播放,在偶数次(2、4、6…)正向播放。
    initial 设置该属性为它的默认值。
    inherit 从父元素继承该属性。
  • animation-fill-mode: 值;
    none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
    forwards 在动画结束后(由 animation-iteration-count 决定)。
    backwards 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。
    both 动画遵循 forwards 和 backwards 的规则。
    initial 设置该属性为它的默认值。
    inherit 从父元素继承该属性。
  • animation-play-state: paused|running;
    paused 指定暂停动画
    running 指定正在运行的动画

3、过渡

  1. transition 简写属性,用于在一个属性中设置四个过渡属性。

  2. transition-property 规定应用过渡的 CSS 属性的名称。

  3. transition-duration 定义过渡效果花费的时间。默认是 0。

  4. transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。

  5. transition-delay 规定过渡效果何时开始。默认是 0。

4、内联框架iframe

  • height规定 的高度。
  • name规定 的名称。
  • sandbox
    “” 启用所有限制条件
    allow-same-origin 允许将内容作为普通来源对待。如果未使用该关键字,嵌入的内容将被视为一个独立的源。
    allow-top-navigation 嵌入的页面的上下文可以导航(加载)内容到顶级的浏览上下文环境(browsing context)。
    allow-forms 允许表单提交。
    allow-scripts 允许脚本执行。
  • seamless规定 看起来像是父文档中的一部分。
<iframe src=\"demo_iframe.htm\" seamless></iframe>
  • src规定在 中显示的文档的 URL。
  • srcdoc规定页面中的 HTML 内容显示在 iframe 中。
  • width规定 的宽度。
赞(0) 打赏
未经允许不得转载:爱站程序员基地 » css3和h5部分新属性