什么是转换？

哦，转换啊，就是让网页上的东西变变样，比如让文字转个圈，huo者让图片动起来。 绝了... 就像我们小时候玩的翻翻书，翻一页，书里的故事就变了。

比如 我们要让一个方块在页面上移动，就可yi用translate这个转换函数。

过渡效果， 有去无回

太坑了。 过渡效果就像是给网页上的东西穿上了衣服，从一种状态变成另一种状态的时候，会有一个变化的过程，就像换衣服一样，慢慢脱下旧衣服，穿上新衣服。

过渡效果的代码长这样：transition: property duration timing-functin delay;，将心比心...

这个代码里的东西有点多， 我来解释一下：

• property我们要过渡的属性，比如颜色、位置等。
• duration过渡的时间，单位是秒huo者毫秒。
• timing-functin时间曲线函数，决定了过渡的速度变化。
• delay延迟时间，过渡效果开始前的等待时间。

3D旋转， 旋转门的感觉

3D旋转就像是让网页上的东西在三维空间里转圈圈， 我无法认同... 就像土耳其烤肉在烤架上转圈烤制一样。

PPT你。 比如 我们想让一个图片围绕Y轴旋转，就可yi用rotateY这个转换函数。

这里的ydeg就是旋转的角度， 正数表示顺时针旋转，负数表示逆时针旋转，研究研究。。

动画， 让网页动起来

动画就像是给网页上的东西放电影，让它们按照一定的顺序和时间进行变化。

动画的代码长这样：animation: name duration timg-function delay count direction fill-mode;

• name动画的名称。
• duration动画的持续时间。
• timg-function时间曲线函数，决定了动画的速度变化。
• delay动画的延迟时间。
• count动画的播放次数。
• direction动画的播放方向。
• fill-mode动画的填充模式。

CSS优化， 让网页geng轻快

换个思路。 CSS优化就像是给网页减肥，让网页加载得geng快，运行得geng顺畅。

优化的方法有hen多，比如：

• 使用css reset清除浏览器默认样式。
• 尽量合并样式，减少代码量。
• 使用精灵图，减少图片请求。
• 将CSS和JS写在独立的文件中。

tong过学习CSS的高级布局技巧， 我们可yi让网页变得geng加生动有趣，用户体验也会geng好，中肯。。

虽然CSS的学习有点复杂，dan是只要我们多加练习，就Neng轻松掌握这些技巧。