响应式设计入门-07CSS3过渡、变形和动画.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: all 1s; 上述代码会有什么效果？ 使用CSS 通配选择器*来选择页面所有元素，然后为所有元素都设置一个耗时1 秒的过渡效果。声明中省略了过渡调速函数，浏览器默认会使用ease；声明中同样省略了延迟时间，浏览器默认使用none，所以过渡效果不会有延迟。,CSS3 的2D 变形,先比较两个单词： transformation（变形）和 transitions（过渡）。 CSS的变形和过渡是完全不同的： * transition: all 1s; nav ul li a:hover transform: scale(1.7); 上面的变形告知浏览器当鼠标悬停在链接上时，将其放大到原始大小的1.7 倍。,CSS3 的2D 变形模块允许我们使用下列变形。 scale：用来缩放元素（放大或缩小） translate：在屏幕上移动元素（上下左右四个方向） rotate：按照一定角度旋转元素（单位为度） skew：沿X 和Y 轴对元素进行斜切 matrix：允许你以像素精度来控制变形效果,格式如下： transform: scale(0.5); transform: translate(40px, 0px); transform: rotate(90deg); transform: skew(10deg, 2deg); /*skew（斜切）会让元素在一个或两个轴上变形偏斜。*/ transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989); /*复杂的语法*/,transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989);是什么意思？ 不明白，可以试试傻瓜化的矩阵变形工具：/matrix/ Matrix Construction Set 这个网站可以让你精确地将元素拖曳成想要的样子，然后它会自动生成完美的矩阵代码（代码中包含了浏览器私有前缀）,transform-origin 属性： 在使用上述变形效果的同时，你还可以使用transform-origin 属性来修改变形效果的起点： transform: rotate(45deg); transform-origin: 20% 20%; 将上面的规则应用到导航链接上，鼠标悬停之后的效果如下： transform-origin 属性默认就在起作用，变形的起点默认是元素的中心点。这个属性提供了一种方便的方法来移动变形的中心点，这样能做出很多很赞的效果。,尝试CSS3 的3D 变形,看一个网页元素： HOT! 外层section元素包含一副电影图片，和一段文字评论。前者是face front，后者是face back。,下面通过CSS3设定变形： .Qcontainer height: 100%; width: 28%; position: relative; -webkit-perspective: 800; float: left; margin-right: 2%; 在最外层的section元素上设置透视。这样就开启了3D 场景,.Qcontainer 类中添加的透视声明只会应用到其第一个子元素上（即本例中的class为.film 的div）。因此，为了延续父元素的透视，我们给.film 元素设定了preserve-3d（这样可以设置一个3D 场景）。 .film width: 100%; height: 15em; -webkit-transform-style: preserve-3d; -webkit-transition: 1s; .film是图片和文字的容器，当hover时，绕Y轴旋转180度 .Qcontainer:hover .film -webkit-transform: rotateY(180deg); ,当海报翻转之后隐藏其背面内容 .face必须使用绝对定位，这样海报才能盖在.back 这个div 的上面 .face position: absolute; -webkit-backface-visibility: hidden; ,给.back 这个div 也加上rotateY。 .back width: 66%; height: 127%; -webkit-transform: rotateY(180deg); background: #3b3b3b; background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); padding: 15%; 不加这句的话，.back 这个div 就会显示在正面海报之上。,降级,用一点传统的CSS 代码为非Webkit 核心浏览器提供一个合理的降级方案: 首先，默认给.front 设置了z-index 为5，以便让其显示在.back 上面： .front z-index: 5; 然后，当.Qcontainer 模块处于悬停状态时，我们给.front 设置z-index 为0 以便让其隐藏在.back 后面： .Qcontainer:hover .front z-index: 0; ,CSS3 动画效果,CSS3 动画由两部分组成： 首先是关键帧声明， 然后在动画属性中使用该关键帧声明。 步骤如下，首先是关键帧规则： keyframes warning 0% text-shadow: 0px 0px 4px #000000; 50% text-shadow: 0 0 20px #000000; 100% text-shadow: 0px 0px 4px #000000; 这里定义了一个keyframes（关键帧）声明。然后为这个特定的关键帧声明设置了一个名称：warning。,在keyframes warning关键帧内可以设置多个关键帧。比如百分比值10%、20%、30%、40%等等，或者也可以使用from和to 值来定义动画的开始帧和结束帧。但注意不同浏览器在使用from 和to 值的情况下效果无法保证。因此建议使用百分比。 keyframes warning from text-shadow: 0px 0px 4px #000000; 50% text-shadow: 0 0 40px #000000; to text-shadow: 0 0 4px #000000; ,我们已经声明了关键帧，接下来可以在动画属性中引用它： .back h5 font-size: 4em; color: #f2050b; text-align: center; animation: warning 1.5s infinite ease-in; 在animation 属性之后，我们设定了要使用的关键帧（例子中的warning）， 然后设定了动画的持续时间（1.5s）， 之后设定了animation-iteration-count（我们在此时使用了infinite 让动画连续循环播放）， 最后设定了调速函数（ease-in）。,CSS3的animation可以设置7 个独立动画属性： animation-name: warning; animation-duration: 1.5s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-play-state: running; animation-delay: 0s; animation-fill-mode: none; 也可以按上述顺序写成缩写，如animation: warning 1.5s infinite ease-in;,。事实上任何CSS 属性都可以用在关键帧动画中，所以有无限可能性。网上有数不清的CSS3 动画技巧范例，像/trends/47-amazing-css3-animation-demos 这个网页就足以给你提供丰富的CSS3 动画灵感。,组合使用 CSS3 变形和动画,侧边栏的标签代码如下： Unsung heroes. Overhyped nonsense. 现在想要当页面刚加载进来的时候这些图片都“晃”几下,编写相关的CSS3 代码。首先，创建一个名为swing 的关键帧声明： -webkit-keyframes swing from transform: rotate(3deg); 20% transform: rotate(7deg); 60% transform: rotate(10deg); 80% transform: rotate(7deg); to transform: rotate(3deg); 这个动画是怎样动的？,这个动画使用了2D 旋转变形，以使图片从3 度旋转至10 度然后再旋转回原位。,接下来给图片上追加animation 属性： #quiz .unSung a:nth-child(odd) img transform: rotate(3deg); #quiz .unSung a:nth-child(even) img transform: rotate(-3deg); #quiz .overHyped a:nth-child(odd) img transform: rotate(3deg); #quiz .overHyped a:nth-child(even) img transform: rotate(-3deg); 在添加动画属性之前，先给图片设置一个默认的旋转变形，