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

CSS3过渡 变形和动画 本章内容 什么是CSS3过渡以及如何使用它如何编写CSS3过渡以及它的缩写语法CSS3过渡时间函数 ease cubic bezier等 响应式网站中有趣的过滤效果什么是CSS3变换以及如何使用它理解不同的2D变换 scale rotate skew translate等 尝试3D变换CSS3动画效果 使用关键帧 CSS3过渡 使用CSS3过渡可以让元素从一种状态慢慢转换到另一种状态 按照CSS的传统方法 给链接按钮增加一个悬停效果 contenta hover border 1pxsolid 000000 color 000000 text shadow 0px1pxwhite 这里只是在鼠标悬停时简单地修改了一下文字颜色 文字阴影以及边框的颜色 当鼠标悬停在按钮上面时 按钮会直接从第一种状态 白色文字 突变到第二种状态 黑色文字 就是一个开关效果 CSS3的做法是 contenta 原来的样式 transition all1sease0s 现在再把鼠标悬停在按钮上 文字 文字阴影和边框阴影的颜色都会从第一种状态平滑过渡到第二种状态 注意 这里把过渡应用到了元素而不是悬停状态上 这样做是为了让元素的其他状态 如 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 可选 用于定义过渡开始前的延迟时间 contenta 其他样式 transition property all transition duration 1s transition timing function ease transition delay 0s contenta 其他样式 transition property all transition duration 1s transition timing function ease transition delay 0s 过渡的简写语法 可以将单个的声明组合成一个简写版 transition all1sease0s 四个值与上面的顺序一一对应 考虑得周全一点 添加浏览器私有前缀 o transition all1sease0s ms transition all1sease0s moz transition all1sease0s webkit transition all1sease0s transition all1sease0s 将没有前缀的标准版本放在最后面 这样当浏览器完全实现了标准之后 这句代码就会覆盖之前带前缀的版本 可以在不同时间段内过渡不同属性下面这段代码 contenta 其他样式 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 all1s 上述代码会有什么效果 使用CSS通配选择器 来选择页面所有元素 然后为所有元素都设置一个耗时1秒的过渡效果 声明中省略了过渡调速函数 浏览器默认会使用ease 声明中同样省略了延迟时间 浏览器默认使用none 所以过渡效果不会有延迟 CSS3的2D变形 先比较两个单词 transformation 变形 和transitions 过渡 CSS的变形和过渡是完全不同的 transition all1s navullia 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 是什么意思 不明白 可以试试傻瓜化的矩阵变形工具 transform origin属性 在使用上述变形效果的同时 你还可以使用transform origin属性来修改变形效果的起点 transform rotate 45deg transform origin 20 20 将上面的规则应用到导航链接上 鼠标悬停之后的效果如下 transform origin属性默认就在起作用 变形的起点默认是元素的中心点 这个属性提供了一种方便的方法来移动变形的中心点 这样能做出很多很赞的效果 尝试CSS3的3D变形 看一个网页元素 HOT 外层section元素包含一副电影图片 和一段文字评论 前者是facefront 后者是faceback 下面通过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动画由两部分组成 首先是关键帧声明 然后在动画属性中使用该关键帧声明 步骤如下 首先是关键帧规则 keyframeswarning 0 text shadow 0px0px4px 000000 50 text shadow 0020px 000000 100 text shadow 0px0px4px 000000 这里定义了一个 keyframes 关键帧 声明 然后为这个特定的关键帧声明设置了一个名称 warning 在 keyframeswarning关键帧内可以设置多个关键帧 比如百分比值10 20 30 40 等等 或者也可以使用from和to值来定义动画的开始帧和结束帧 但注意不同浏览器在使用from和to值的情况下效果无法保证 因此建议使用百分比 keyframeswarning from text shadow 0px0px4px 000000 50 text shadow 0040px 000000 to text shadow 004px 000000 我们已经声明了关键帧 接下来可以在动画属性中引用它 backh5 font size 4em color f2050b text align center animation warning1 5sinfiniteease 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 warning1 5sinfiniteease in 事实上任何CSS属性都可以用在关键帧动画中 所以有无限可能性 网上有数不清的CSS3动画技巧范例 像 组合使用CSS3变形和动画 侧边栏的标签代码如下 Unsungheroes Overhypednonsense 现在想要当页面刚加载进来的时候这些图片都 晃 几下 编写相关的CSS3代码 首先 创建一个名为swing的关键帧声明 webkit keyframesswing 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 unSunga nth child odd img transform rotate 3deg quiz unSunga nth child even img transform rotate 3deg quiz overHypeda nth child odd img transform rotate 3deg quiz overHypeda nth child even img transform rotate 3deg 在添加动画属性之前 先给图片设置一个默认的旋转变形 以便让它们在动画结束之后仍然是倾斜的 利用前面学习的nth child选择器来分别选择出奇数与偶数图片 然后应用不同的旋转变形 然后给每张图片都追加animation属性 注意规则之间的差别 缩写语法会将第二个时间值 0 5秒 认定为动画延时时间 通过设定这个值 就可以分别在不同的时间启动各个动画效果 quiz unSunga nth child odd img transform rotate 3deg animation swing0 1s5ease in quiz unSunga nth child even img transform rotate 3deg animation swing0 1s5