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、过渡
-
transition 简写属性,用于在一个属性中设置四个过渡属性。
-
transition-property 规定应用过渡的 CSS 属性的名称。
-
transition-duration 定义过渡效果花费的时间。默认是 0。
-
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。
-
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规定 的宽度。