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(大屏鼠标滚动)
——引入.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
9.动画速度
F12打开开发者工具 点击动画速度图标,会有各种动画速度及效果的调试
10.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 data-content-id= " content01 "> < /div >
14H5 api
1. querySelector() 获取符合选择器的第一个元素
2. querySelectorAll() 获取符合选择器的所有元素
DOM.classList 获取的是这个DOM元素上的所有class