1.过渡----transition
让元素样式慢慢进行变化
1.1 过渡的时间------transition-duration
过渡效果完成的时间(s)
1.2 过渡的属性------transition-property
设置哪些样式有过渡(没过渡的直接完成)
all:代表所有样式都有过渡
1.3 过渡的效果------transition-timing-function
设置过渡变化的不同
ease:先慢====>再快=====>再慢
linear:匀速
step(步数):过渡分布数式进行
1.4 过渡的延时-------transition-delay
设置过渡延时多久进行
1.5 过渡的连写
transition: duration property timing-function delay
注:过渡的连写没有顺序要求,但过渡的时间是必写的,且第一个时间永远是过渡的时间
2. 动画@keyframes
2.1 动画的步骤
定义动画
使用动画
2.2 定义动画
结构:@keyframes 动画名 {}
方法:@keyframes 动画名 {
from {
开始状态
}
to {
结束状态
}
}
@keyframes 动画名 {
0% {
开始状态
}
50% {
中间状态
}
100% {
结束状态
}
}
2.3 动画的使用
元素{ animation:动画名 动画时间}
2.4 动画的8大属性
动画名称:animation-name
动画持续时间:animaton-duration
动画的速度效果:animation-timing-function
动画的延时:animation-delay
动画的次数:animation-iteration-count
infinite:无穷
动画的顺序:animation-direction
normal: 正常from====>to(默认)
reverse:反转to=====>from
alternate:交替from====>to====>from
动画的结束状态:animation-fill-mode
默认再from状态
forwards:在to结束状态
动画的执行状态:animation-play-state
默认是执行的
paused:动画暂停(一般与hover连用)
2.5 动画的连写
animation: name duration timing-function delay iteration-count direction fill-mode;
注:name 与duration是必写的,且第一个时间永远是动画执行时间.
3.css3私有前缀
作用:兼容草案阶段的不同浏览器
Safari和谷歌浏览器:-webkit-
ie浏览器:-ms-
火狐浏览器:-moz-
opera:-o-
4.初识移动端
移动端浏览器只需兼容webkit内核即可
移动端屏幕大小不同,需要使用自适应(流式布局,百分比布局)
4.1 视口的概念
作用:解决了移动端访问pc端页面的问题
特点:可以缩放 默认宽度为980px
快捷键生成: meta:vp(使用subline生成的更加完整)