CSS3为用户添加了三个特殊效果的处理方式:过渡、动画、变化。当用户和界面元素交互时,使用这些特殊样式可大大改善用户的体验效果。这些效果可以直接由浏览器引擎处理,还能节省开销。尽管如此,这些效果会耗费大量的处理能力,尤其是一些复杂的WEB页面上。即使是最基本的效果,也是如此。本篇的目的只是熟悉这三种CSS处理效果,不推荐在实际系统中大篇幅使用。 温馨提示:请谨慎大篇幅使用这些特殊效果。 另外一方面,由于在CCS3标准化之前,主流浏览器都是通过添加厂商前缀方式提供样式支持。所以要解决浏览器兼容问题,使用这些样式,我们不得不为每一个样式添加各个产商前缀,例如添加一个过度延迟时间属性transition-delay,不得不这样写:

-webkit-transition-delay: 300ms;
-o-transition-delay: 300ms;
-moz-transition-delay: 300ms;
-ms-transition-delay: 300ms;
transition-delay: 300ms;

弹窗效果

This is a modal window. You can do the following things with it:

  • Read: modal windows will probably tell you something important so don't forget to read what they say.
  • Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
  • Close: click on the button below to close the modal.