一、基础班学习路线
Web服务器
什么是服务器
申请免费空间以及网站上传
四、HTML5和CSS3提高
1.CSS3 2D转换
2D转换之移动 translate
让一个盒子水平垂直居中
2D转换之旋转 rotate
案例-三角形
设置转换中心点transform-origin
旋转案例
2D转换之缩放 scale
图片放大案例
案例-分页按钮
2D转换综合写法及顺序问题
2D转换小结
2.CSS3 动画
CSS3动画基本使用
- 动画比过渡更强大,不需要鼠标经过,自动播放
动画序列
CSS3 动画常见属性
CSS3 动画简写
大数据热点图案例
- 注意权重的问题
- 这里之所以用宽和高而不用scale,因为后者会把阴影一起放大,不好看
- 前面的
.city
用top和right,这里要覆盖他不能用bottom或则left
速度曲线之steps步长
- 打字机效果(一步打一个字):注意字体大小和宽度关系(10个20px的字和200px宽的盒子);分10步,每一步打一个字,steps(10)
案例-奔跑的熊大
- 跑过来的效果:
3.CSS3 3D转换
认识3D转换
3D移动 translate3d
透视perspective
3D旋转 rotateX
3D呈现 transform-style
案例-两面翻转盒子
案例-3D导航栏
案例-旋转木马
浏览器私有前缀
更多推荐
黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程(CSS3)
发布评论