Days18 H5+Css3

1.使用动画 （js实现动画，css3实现动画）

一个是帧动画  一个是补间动画

什么是帧动画：使用定时器 每隔一段时间 更改当前元素的状态

什么是补间动画：过渡(加过渡只要状态发生改变产出动画) 动画（多个节点来控制动画） 性能会更好

在支持H5C3的的浏览器尽可能使用css3动画 （移动端开发）

transition  animation

transition  组合写法（transition:all 1s linear 1s）的拆分写法 transition-property  transition-duration transition-timing-function transition-delay

2.图片边框

图片边框

3.background

background-size的cover特定值会保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域。

4.语义化标签

语义化标签

5.fullpage.js(大屏鼠标滚动)

fullpage.js文档地址

——引入.js .css——一屏的内容包含在一个大div（id=container）

——每个屏幕为一个section，内容相对section定位

——jQuery插件初始化——$( ' #container').fullpage('配置');

结合购物车案例和fullpage文档，学习。

6.居中定位（position）

pposition:absolute;   bottom:0 ; left :50% ;margin-left: -w/2 px

css3:                                                          transform:translatex(- 50%)

7.写动画效果注意点

通过transform - orgin：right top 来确定原点位置，以原点来决定动画在xy移动的距离，

想让界面加载完成后再执行动画， $('.section').eq(index-1).addClass('now');动态添加类now

在.css中写.section .now {   },

记忆animation和transform和transition的各个参数含义

8.Animate.css

animate.css

9.动画速度

F12打开开发者工具   点击动画速度图标，会有各种动画速度及效果的调试

10.Stellar.js(视差滚动)

Stellar.js教程

QQ TIM案例

引入.js—— js初始化

——设置background-attachment: fixed;——data-stellar-background-ratio="0.3"（相对于正常滚动的滚动速度）

11.图片展示时，加上相应文字并设置font-size:0,有利于Seo优化

12.H5添加类名

1.jquery操作类的方法：addClass() removeClass() toggleClass() hasClass()

2. h5也有类似的api 基于一个对象classList的方法 add() remove() toggle() contains()

13.自定义属性

在HTML5中我们可以自定义属性，其格式如下data-*=""

< /div >

14H5 api

1. querySelector() 获取符合选择器的第一个元素

2. querySelectorAll()    获取符合选择器的所有元素

DOM.classList 获取的是这个DOM元素上的所有class

H5 api