css3动画属性

css3常用动画属性

1.1 圆角

属性：border-radius

值：px | %

 

1.2 渐变

属性：linear-gradient

值：参数1：开始的位置：bottom、top、left、right

　　参数2....每隔阶段的颜色，使用百分比表示

可加前缀，不同的浏览器兼容性不一样：

谷歌内核浏览器：-webkit-

火狐内核的浏览器：-moz-

IE内核浏览器：-ms-

 

1.3 平移

下面3个属性（平移、旋转、缩放）通常会结合transition过度的属性使用

属性：

transform:translateX()：沿X轴移动

transform:translateY()：沿Y轴移动

transform:translate()：沿X、Y轴移动

 

1.4缩放

属性：transform:scale()

 

1.5旋转

属性：

transform:rotateX()    ：沿x轴旋转

transform:rotateY()  ：沿y轴旋转

 

1.6过渡

属性：transition

参数1：执行过度的css属性 all

参数2：持续的过渡时间

参数3：速度曲线：linear 匀速，ease 由快到慢

参数4：延迟的时间，单位都是s秒

 

 

1.7 自定义动画

（1） 先定义动画：@keyframes 动画名称

先将起点到终点，分成几个部分

0%表示起点的位置

25%表示整个过程的四分之一处

100%表示终点的位置

 

（2） 调用动画：animation:

参数1：动画名称

参数2：动画花费的时间

参数3：速度曲线

参数4：延迟的时间

参数5：播放的次数，默认只播放1次，infinite表示循环播放

参数6：下一周期正向还是逆向：如果alternate表示逆向播放

 

参数7：播放的状态，默认是running；paused表示暂停 （一般单独使用）

 

javascript移动端应用

 

2.1视口

视口是HTML5、CSS3新增的技术，用来解决网页采用什么样的分辨率进行渲染

如果PC端网页的内容不加任何修饰直接在手机端打开，那么字体在手机端会显得很大，因为PC的分辨率比手机大得多，那么使用视口之后，会自动的根据设备的分辨率自动的渲染网页的内容

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"/>
    width=device-width：要求浏览器自动按照设备的宽度进行渲染
    initial-scale=1.0：初始比例1.0，表示不放大不缩小
    user-scalable=no：禁止放大、缩小网页

 

2.2 documentElement

说明：

我们在获得body宽度时，即使没有内容，也能获得body的真实宽度，但是高度就不一样了，如果body里面没有内容，无法获得body的真实高度，

 

我们可以使用document.documentElement对象来获得body真实的宽度、高度，即使body里面没有内容。