CSS3动画
[player autoplay="1"]
Tips:
- transition 过渡 过渡的时间 过渡的延迟等
- transform 转换的意思 移动 X、Y 轴 旋转等
1.
translate() X Y 轴 有translateX() 和 translateY() 单独设置 XY
2.rotate() 在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转
3.scale() 放大倍数该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数 设置一个参数 就是等比例缩放 设置两个参数就是分别XY轴缩放倍数
4.skew() 该元素会根据横向（X轴）和垂直（Y轴）线参数给定角度：
5.matrix() 方法和2D变换方法合并成一个。 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
渐变色
背景色渐变
#box{
background:-linear-gradient(bottom,rgba(0,0,0,0.6) 0,rgba(0,0,0,0) 100%);
background:-webkit-linear-gradient(bottom,rgba(0,0,0,0.6) 0,rgba(0,0,0,0) 100%);
background:-ms-linear-gradient(bottom,rgba(0,0,0,0.6) 0,rgba(0,0,0,0) 100%);
background:-mox-linear-gradient(bottom,rgba(0,0,0,0.6) 0,rgba(0,0,0,0) 100%);
}
2D转换效果
translate(x,y) 此属性的移动到的位置
translateX() X轴移动多少位置
translateX() Y轴移动多少位置
transition 过度动画
参数一 执行过度效果的css属性()
参数二 执行过度效果持续的事件(单位是秒 ， 可以写小数)
参数三 在执行过度的速度曲线(匀速 加速 减速)
默认值 ease 先快 然后平缓;
linear 匀速执行;
参数四 延迟多长时间执行
Tips: 不同的浏览器兼容性不一样
Chrome: -webkit-transition();
IE: -ms-transition();
FireFox:-moz-transition();
缩放
transform:scale(缩放的倍数);
Tips:最好加上浏览器兼容性的处理
旋转
旋转的度数
transform:rotate(360deg);
设置旋转的中心
transform-origin:left bottom;左下角为旋转中心
3D动画
自定义动画
1.定义动画
@keyframes 动画的名称 =>定义动画
通过百分数拆分动画，可分别设置不同百分数过程中的动画
@keyframes mymove{
0%{left:0;top:0}
25%{left:300px;top:0}
50%{left:300px;top:300px}
75%{left:0;top:300px}
100%{left:0;top:0}
}
2.调用动画 animation:动画名称 执行的时间
#box{
position:absolute;
animation：mymove 1s;
}
animation-timing-function 速度曲线
animation-iteration-count 播放次数
默认1
infinite 循环播放
animation-direftion 是否逆向播放
默认是 normal
alternate 逆向播放
调用自定义动画的参数
- 自定义动画名称
- 动画执行时间
- 动画速度曲线
- 延迟执行时间
- 播放次数 默认1 infinite 表示循环播放
- 下一动画周期 是 正常播放还是逆向播放
- 播放状态 animate-play-state通常单独使用，如果paused表示暂停
animation-play-state 动画播放状态
默认是：running
paused 暂定
动画执行完毕 保留动画最终位置
通过属性 animation-fill-mode 设置
默认是回到目的地
forward 是停止在目的地
CSS3新增的选择器（常用的）
li:first-child <li>标签中的第一个元素
ul li:first-child{
colro:red;
}
li:last-child <li>标签中的最后一元素
li:nth-child(n) <li>标签中的第n个元素
li:nth-of-type(n) 类型中的第n个li元素
second 中 第 n 个li 元素
#second li:nth-of-type(n){
color:pink;
}
TIPS：索引由1开始
视口
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"/>
device-width 按照设备分辨率渲染网页
initial-scale=1.0 初始比例 1.0 不放大不缩小
maximum-scale=1.0 最大1.0倍
user-scalable=no 不允许用户放大缩小
SPA Single Page Apps 单页面应用
原理： 点击的所有连接都在一个页面中 通过控制页面的显示隐藏 实现页面的切换
HTML5 webApp HybridApp(混合App)
HTML+CSS+JavaScript(AngularJs+ionic)