响应式设计入门-07-CSS3-过渡、变形和动画.ppt

CSS3 过渡、变形和动画 本章内容 什么是 CSS3 过渡以及如何使用它 如何编写CSS3 过渡以及它的缩写语法 CSS3 过渡时间函数（ease、cubic-bezier 等） 响应式网站中有趣的过滤效果 什么是 CSS3 变换以及如何使用它 理解不同的2D 变换（scale、rotate、skew,、translate 等） 尝试 3D 变换 CSS3 动画效果（使用关键帧） CSS3 过渡 使用CSS3 过渡可以让元素从一种状态慢慢转换到另一种状态。 按照CSS的传统方法，给链接按钮增加一个悬停效果： #content a:hover { border: 1px solid #000000; color: #000000; text-shadow: 0px 1px white; } 这里只是在鼠标悬停时简单地修改了一下文字颜色、文字阴影以及边框的颜色。 当鼠标悬停在按钮上面时，按钮会直接从第一种状态（白色文字）突变到第二种状态（黑色文字）——就是一个开关效果。 CSS3的做法是： #content a { /*……原来的样式……*/ transition: all 1s ease 0s; } 现在再把鼠标悬停在按钮上，文字、文字阴影和边框阴影的颜色都会从第一种状态平滑过渡到第二种状态。注意，这里把过渡应用到了元素而不是悬停状态上。这样做是为了让元素的其他状态（如:active）也能设置不同的样式并拥有类似的效果。 所以请记住，过渡声明要放在过渡效果开始的元素上。 CSS3 过渡效果涉及四个属性 transition-property：要过渡的CSS 属性名称（比如background-color、text-shadow 或者all，使用all 则过渡会被应用到每一个可能的CSS 属性上）； transition-duration：定义过渡效果持续的时间（时间单位为秒，比如.3s、2s或1.5s）； transition-timing-function：定义过渡期间速度如何变化（比如ease、linear、ease-in、ease-out、ease-in-out 或cubic-bezier）； transition-delay：可选，用于定义过渡开始前的延迟时间。 #content a { ……其他样式…… transition-property: all; transition-duration: 1s; transition-timing-function: ease; transition-delay: 0s; } #content a { ……其他样式…… transition-property: all; transition-duration: 1s; transition-timing-function: ease; transition-delay: 0s; } 过渡的简写语法：可以将单个的声明组合成一个简写版： transition: all 1s ease 0s; 四个值与上面的顺序一一对应。 考虑得周全一点 添加浏览器私有前缀： -o-transition: all 1s ease 0s; -ms-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; transition: all 1s ease 0s; 将没有前缀的标准版本放在最后面，这样当浏览器完全实现了标准之后，这句代码就会覆盖之前带前缀的版本。 可以在不同时间段内过渡不同属性 下面这段代码： #content a { /*……其他样式……*/ transition-property: border, color, text-shadow; transition-duration: 2s, 3s, 8s; } 此处我们通过transition-property 来指定只过渡border、color 和text-shadow，然后在transition-duration 声明中我们设定边框过渡效果应该2 秒内完成，文字颜色3 秒，文字阴影8 秒。由逗号分隔的过渡持续时间按顺序对应上面的CSS 属性。 理解过渡调速函数：。ease、linear、ease-in、ease-out、ease-in-out 以及cubic-bezier 这些东西都是做什么用的？ 它们其实都是某种贝塞尔曲线，本质上就是缓动函数。 但是在实际使用中，它们的效果也确确实实没有太大区别。因为除非有什么特殊的理由，否则使用快速（最多1s）的默认过渡（ease）效果往往最好。 思考 * { transition: