公开课资料 前端公开课 2018年 公开课资料整理中1118 公开课内容 纯css3多云转晴 kpd

Css云彩运动什么是 CSS3 中的动画？动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词 from 和 to，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。1、animation css动画animation 属性是一个简写属性，用于设置六个动画属性： animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。语法animation: name duration timing-function delay iteration-count direction;值描述animation-name规定需要绑定到选择器的 keyframe 名称。animation-duration规定完成动画所花费的时间，以秒或毫秒计。animation-timing-function规定动画的速度曲线。animation-delay规定在动画开始之前的延迟。animation-iteration-count规定动画应该播放的次数。animation-direction规定是否应该轮流反向播放动画。2、 transform 旋转 div 元素：浏览器支持Internet Explorer 10、Firefox、Opera 支持 transform 属性。Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。Opera 只支持 2D 转换。定义和用法transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。为了更好地理解 transform 属性，请查看这个演示。默认值：none继承性：no版本：CSS3JavaScript 语法：object.style.transform=rotate(7deg)语法transform: none|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 个值的 4x4 矩阵。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 转换元素定义透视视图。测试4、keyframes 规则使 div 元素匀速向下移动：目前浏览器都不支持 keyframes 规则。Firefox 支持替代的 -moz-keyframes 规则。Opera 支持替代的 -o-keyframes 规则。Safari 和 Chrome 支持替代的 -webkit-keyframes 规则。定义和用法通过 keyframes 规则，您能够创建动画。创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 from 和 to，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。语法keyframes animationname keyframes-selector css-styles;值描述animation