一、基础班学习路线

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)