电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 响应式Web设计：使用HTML5和CSS3实践（12） [打印本页]

作者: look_w 时间: 2019-2-18 19:10 标题: 响应式Web设计：使用HTML5和CSS3实践（12）

第7章 CSS3过渡、变形和动画
7.1 什么是CSS3过渡以及如何使用它

一个超链接默认设置了一个样式，当鼠标hover上去的时候可能会应用到另外一个样式，这就是一个过渡。过渡可以针对属性来过渡，比如当hover发生时候过渡。

过渡涉及四个属性：
      transition-property 要过渡的属性名称，比如background-color或all
      transition-duration 定义过渡效果持续的时间
      transition-timing-function 定义过渡期间速度如何变化
      transition-delay 可选，定义过渡开始前的延迟事件

单独使用各种过渡属性创建效果的语法如下：

      #content a {
         transition-property: all;
         transition-duration: 1s;
         transition-timing-function: ease;
         transition-delay: 0s;
      }


简写语法如下

transition: all 1s ease 0s;

也可以在不同的时间段内过渡不同的属性

      #content a {
         /* other setting */
         transition-property: border, color, text-shadow;
         transition-duration: 2s, 3s, 8s;
      }

过渡调速函数，不太理解可以参考这里

7.2 CSS3中的2D变形

有两种可用的CSS3变形：2D变形和3D变形。其中2D变形实现更广泛，它允许我们使用如下变形：
      scale：用来缩放大小
      translate：在屏幕内移动元素
      rotate：按照一定的角度旋转元素
      skew：按照X和Y轴对元素进行斜切
      matrix：将上述若干变形效果组合成单个声明，并允许你用像素精度来控制变形效果
实际项目中可以使用傻瓜矩阵变形工具来完成这样的事情。
transform-origin可以用来修改变形效果的起点。

7.3 尝试CSS3的3D形变

CSS3的3D形变能创造非常酷的效果，但相对2D的浏览器支持性要差一些。

7.4 CSS3动画效果

如下是一个给h5加上阴影动画的例子，最开始定义一个关键帧的名字，以及在动画进行到多少的时候的效果，然后在元素h5应用。当然如果想要在特定浏览器上执行，得要给 @keyframes 和 animation 都加上私有前缀。

@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-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;

CSS3过渡让效果的初始按照可定义的速度进行，形变使使得元素大小、偏移等值脱离初始，动画则定义了一个变化的过程，三者结合起来能产生非常丰富的效果。该书示例有结合示例进行演示，在此跳过，有兴趣可以自己参考~
7.5 本章小结

本章学习了CSS3过渡、形变和动画的内容，学习这些新特性的最终目的是使用CSS3来替代JavaScript制作一些优雅降级的增强效果，从而使代码更简洁和丰富。下一章将开始学习表单中HTML5和CSS3的应用。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)